• Takeaways
• 1. Use dom-testing-library with React
• 2. Use dom-testing-library with Preact
• 3. Use dom-testing-library with jQuery
• 4. Use dom-testing-library with Dojo
• 5. Use dom-testing-library with HyperApp
• 6. Use dom-testing-library with AngularJs
• 7. Use dom-testing-library with Angular
• 8. Use dom-testing-library with Vue
• 9. Use dom-testing-library with Mithril
• 10. Use dom-testing-library with Svelte
• 11. Use dom-testing-library with from-html

1. 1.

   create a render function to abstract the repetitive work of rendering the component you will be testing
2. 2.

   identify how to render the component to HTML
3. 3.

   append that HTML to a container you have control of
4. 4.

   use dom-testing-library to get all the different functions for getting and querying elements in your container using getQueriesForElement
5. 5.

   in your test, render the component using your render function
6. 6.

   if the library renders asynchronously, make your test async, make your render function async, and await when calling your render function
7. 7.

   if the library you are using renders updates asynchronously when events trigger updates, use await to wait for the update before asserting. Most async updates occur at the end of the current event loop, but not all. If you know updates happen via the event loop, you can simply use await and dom-testing-librarys wait. If they are non-deterministically updated, e.g. not using the event loop, you'll need to assert inside waits callback so that Jest keeps asserting until either the UI is updated or the test fails.

1. 1.

   a render function that will mount our component
2. 2.

   we need somewhere to mount our component, so our render function creates a container element using document.createElement.
3. 3.

   using ReactDOM.render we render components into that container
4. 4.

   React uses body to append all event handlers. We need to account for that, so we append our container to body using document.body.appendChild
5. 5.

   query functions to get elements in the document. We use the exported getQueriesForElement from dom-testing-library to get all the different queries, and return them in our own render function
6. 6.

   we also return our container so that we can inspect it directly
7. 7.

   because we've mounted our component using React, and appended it to the DOM, we need to do some cleanup. We return a cleanup function in render that first unmounts our component using ReactDOM.unmountComponentAtNode which accepts the container we mounted our component at. We also use document.body.removeChild to remove our component from the DOM. cleanup will need to be used after every test to ensure that subsequent tests do not contain previously rendered components.

1. 1.

   we need a render function
2. 2.

   in that render function we need a container on which we can mount our components, so we create one with document.createElement('div')
3. 3.

   we then use Preact.render(ui, container) to render our component on that container
4. 4.

   we then need query methods to assert on rendered elements, so we export the result of applying container to dom-testing-librarys getQueriesForElement function, spreading it
5. 5.

   we return the container, too

1. 1.

   wrap our assertion in a setTimeout with a delay of 0
2. 2.

   use async await with dom-testing-librarys wait function to wait for the next tick of the event loop before asserting