react-native-test-sandbox VS testing-library-docs

Here's a contrived example of a test on a list component. And here is the test harness. Even though this example is about components, all of these techniques are applicable to the renderHook api from react-testing-library as well. The test harness wraps the component under test with a react-query store provider, and ui library provider, and a navigation provider. It also provides a means to pass through your own ad hoc wrapper as an argument in the render api if there is some one-off context provider or something else you need for a particular component/hook so it has the dependencies it needs. Once these test harnesses are set up, getting new components/hooks under test is pretty trivial. But thought does need to go into how you design the argument signature of the test harness so you can expressively set it into some prerequisite state before running a test. An example of this is if you want redux to already have something in its store before a test runs.

Testing Library provides a great set of accessibility-focused tools to locating elements when writing tests. It was created by Kent C Dodds, one of my longtime favorite educators on front-end and testing topics. Since the initial release in 2018 as "React Testing Library", it's grown in popularity beyond its React component testing roots. It now has plugins for all major test runners and JavaScript frameworks, and in 2022 some of its patterns were adopted in Playwright's test runner as the recommended way to locate elements.

Probably Enzyme was the first to popularize component testing in React by doing shallow rendering and expecting some things to be there in the React component tree. Then React Testing library came and took component testing to a whole new level.

18.react-testing-library

Jest has long been my favorite got to test runner when it comes to UI unit and integration testing. With tools like React Testing Library (Testing Library framework for React) you get the benefit of very easy to write and maintain tests, as well as a quick and efficient way to run our tests.

I'm writing an intergration test with Testing Library where I'm on a boards dashboard area and a user can click a button to create an item on the board. I'm using an intercepting route to do show the popup form. Once finished the user goes back to their area and should see the created board.

This article uses Jest and React Testing Library. It's okay if you want to use other libraries, the fundamentals in this article will help you there as well.

This is the idea behind Testing-Library from what I understand.

https://testing-library.com/

The Testing Library: The Testing Library offers guidance on best practices for testing user interfaces effectively, with a focus on user-centric testing.

There are great tools like Testing Library that render a single component in a single state and then programmatically inspect the resulting DOM. However, the salient details of the rendered HTML – like color, layout, and scale – are hard to express. So, the tests end up brittle (over-specified) or insufficient (under-specified).