Rather than dealing with OverReactUiComponent instances, or React VDom ReactElements, your tests will work with actual DOM nodes. The utilities this library provides facilitate querying the DOM in the same way the user would. Finding form elements by their label text (just like a user would), finding links and buttons from their text (like a user would). It also exposes a recommended way to find elements by an HTML data-test-id attribute value as an "escape hatch" for elements where the text content and label do not make sense or is not practical.
This library encourages your Dart web applications to be more accessible and allows you to get your tests closer to using your components the way a user will, which allows your tests to give you more confidence that your application will work when a real user uses it.
4. Add an HTML template for your tests that will load the necessary React / react-testing-library JS files
NOTE: The names of the files below are recommendations only, and are not essential to a functional setup.
Using test_html_builder (recommended)
We strongly recommend using the test_html_builder library to create a template that will be used to load each .dart.js test file.
Use the template .html file above and follow the test_html_builder library instructions for wiring it up!
Adding / committing your own HTML file(s)
If for some reason you do not wish to use the test_html_builder library to generate the necessary .html file(s), you must create one for each analogous *_test.dart file in which you are using react_testing_library as shown below. Note that you will have to have one .html file for each .dart file containing your unit tests.
5. Write test(s) for your component(s)!
Using the render function, you can now generate DOM using React components and query within that DOM to get the element(s) you want to test!
Then, you can use the Matchers from the matchers.dart entrypoint to perform assertions on that DOM, and the events and user events entrypoints or whatever to interact with the DOM.
The react_testing_library Dart package strives to maintain API parity with the analogous JS testing-library packages within reason. However, there are certain differences that are either unavoidable, or intentional for the purposes of building Dart APIs that are easy to use and reason about.
Read more about Dart / JS API Parity for the following API categories: