diff --git a/README.md b/README.md index 5a24010..183741f 100644 --- a/README.md +++ b/README.md @@ -9,7 +9,7 @@ and pairing with smart people at Hashrocket. For a steady stream of TILs, [sign up for my newsletter](https://tinyletter.com/jbranchaud). -_947 TILs and counting..._ +_948 TILs and counting..._ --- @@ -691,6 +691,7 @@ _947 TILs and counting..._ ### React Testing Library +- [findBy\* Queries Have Async Built In](react-testing-library/find-by-queries-have-async-built-in.md) - [Test A Component That Uses React Portals](react-testing-library/test-a-component-that-uses-react-portals.md) ### ReasonML diff --git a/react-testing-library/find-by-queries-have-async-built-in.md b/react-testing-library/find-by-queries-have-async-built-in.md new file mode 100644 index 0000000..2b61724 --- /dev/null +++ b/react-testing-library/find-by-queries-have-async-built-in.md @@ -0,0 +1,27 @@ +# findBy\* Queries Have Async Built In + +The `getBy*` queries provided by [DOM Testing +Library](https://testing-library.com/docs/dom-testing-library/api-queries) +allow you to find an element by various criteria in the rendered component. +These queries are synchronous. If you need to find an element in response to an +async event, you'll have to wrap it in a `waitFor` call. + +DOM Testing Library also provides a set of `findBy*` queries as a convenience +which have essentially wrapped the corresponding `getBy*` calls in `waitFor` +calls under the hood. + +You can use these with async/await: + +```javascript +test("displays validation warnings for required fields", async () => { + render(); + + fireEvent.click(screen.getByText("Submit")); + + // validation on Name field + const nameValidation = await screen.findByTestId("error-name"); + expect(nameValidation.innerHTML).toBe("Required"); +}); +``` + +[source](https://twitter.com/davidcrespo/status/1296639929376792577?s=20)