7 ms·

How would you recommend testing components that use the `useSelector/useDispatch` hooks internally?

• acemarke 6y ago
  The React ecosystem has a whole has moved towards a more "integration"-ish approach towards testing components. There's multiple reasons for this: - Kent C Dodds is a strong proponent of that approach, and teaches it in his materials on how to write tests. He also created the React Testing Library lib, which has picked up a lot of adoption in the community. (Enzyme has struggled to keep up with some of the newer features in React, which has led to a number of folks switching to RTL as well.) - Hooks in general push you towards a different set of tradeoffs for how your components read data. Related to that, the concept of "container components" isn't completely useless, but the community always over-obsessed about that idea. I specifically talked about some of the differences in mental models and tradeoffs in my post "Thoughts on React Hooks, Redux, and Separation of Concerns" [0], and my ReactBoston 2019 talk on "Hooks, HOCs, and Tradeoffs" [1]. So, the RTL docs suggest that you should test Redux-using components by writing a reusable function to "render components with a Redux store + Provider wrapped around them" [2], and we just merged a PR to the Redux docs that shows that same approach [3]. [0] https://blog.isquaredsoftware.com/2019/07/blogged-answers-thoughts-on-hooks/ https://blog.isquaredsoftware.com/2019/07/blogged-answers-th... [1] https://blog.isquaredsoftware.com/2019/09/presentation-hooks-hocs-tradeoffs/ https://blog.isquaredsoftware.com/2019/09/presentation-hooks... [2] https://testing-library.com/docs/example-react-redux https://testing-library.com/docs/example-react-redux [3] https://redux.js.org/recipes/writing-tests#connected-components https://redux.js.org/recipes/writing-tests#connected-compone...