course illustration

Use DOM Testing Library to test any JS framework

lessons icon12 video lessonsduration icon17m of learning material

The person using your application components shouldn’t have to know or care what framework(s) you used to write your application. Guess what: Neither should your tests.

This course explores the dom-testing-library using 11 different frameworks, from React to Svelte. You’ll get hands-on experience writing tests for any JavaScript framework, giving you the confidence you need to ship your JavaScript application with your framework of choice.

Lessons

1. Intro to Use DOM Testing Library to test any JS framework

duration icon 2m

2. Use DOM Testing Library with React

To use DOM Testing Library with React, we’ll write a custom render function that utilizes the getQueriesForElement function. Because React binds all event handlers to the body we’ll have to append our container to the body and we’ll add a cleanup method to unmount the component and cleanup the DOM. If you like this, checkout react-testing-library.

If you like this, checkout React Testing Library.

duration icon 2m

3. Use DOM Testing Library with Preact

To use DOM Testing Library with Preact, we’ll write a custom render function that utilizes the getQueriesForElement function. Because preact re-renders asynchronously, we’ll use a custom fireEventAsync function to ensure that the app has re-rendered after every event we fire. If you like this, checkout preact-testing-library.

If you like this, checkout Preact Testing Library.

duration icon 2m

4. Use DOM Testing Library with jQuery

To use DOM Testing Library with jQuery, we’ll create a DOM node and apply our jQuery plugin to that DOM node, then we can use getQueriesForElement on that DOM node to get the queries we need to start writing out our tests.

duration icon

5. Use DOM Testing Library with Dojo

To use DOM Testing Library with Dojo, we’ll write a custom render function that utilizes the getQueriesForElement function and dojo’s widge-core utilities.

duration icon 1m

6. Use DOM Testing Library with HyperApp

To use DOM Testing Library with HyperApp, we’ll write a custom render function that utilizes the getQueriesForElement function. HyperApp renders and re-renders asynchronously, so we’ll use a custom fireEventAsync utility function to ensure that the app has re-rendered after every event we fire.

duration icon 1m

7. Use DOM Testing Library with AngularJS

To use DOM Testing Library with AngularJS, we’ll write a custom render function. We’ll pass our template and angular module we’d like to use for bootstrapping a mini-app inside a div we create, then use getQueriesForElement for that mini-app container. From there we can use all the regular utilities we enjoy from dom-testing-library.

duration icon 1m

8. Use DOM Testing Library with Angular

To use DOM Testing Library with Angular, we’ll write a custom render function that utilizes the getQueriesForElement function. Here we need to create a test bed testing module which we’ll use to get a native element for our container.

If you like this, checkout Angular Testing Library.

duration icon 1m

9. Use DOM Testing Library with VueJS

To use DOM Testing Library with VueJS, we’ll write a custom render function that utilizes the getQueriesForElement function. Vue is another library that re-renders asynchronously, so we’ll use that custom fireEventAsync to ensure that we wait until the next tick of the event loop before making further queries. If you enjoy this, checkout vue-testing-library.

duration icon

10. Use DOM Testing Library with Mithril

To use DOM Testing Library with Mithril, we’ll write a custom render function which mounts a mithril component and then utilize the getQueriesForElement function on the container where it’s been mounted. Mithril is unique in how it re-renders so we’ll use dom-testing-library’s wait function for our assertions.

duration icon 1m

11. Use DOM Testing Library with Svelte

To use DOM Testing Library with Svelte, we’ll write a custom render function that utilizes the getQueriesForElement function. We’ll take the svelte template and create a constructor for that as well as the data to interpolate. Then we can use dom-testing-library queries as normal.

If you like this, checkout Svelte Testing Library.

duration icon 1m

12. Use DOM Testing Library with from-html

To use DOM Testing Library with from-html, we’ll write a custom render function that utilizes the getQueriesForElement function. In our situation we’ve made a custom “component” class for from-html, we mount that manually and then we can use DOM Testing Library's queries on the container we create.

duration icon 1m