To use DOM Testing Library with [Preact](https://preactjs.com/), 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](https://github.com/antsmartian/preact-testing-library).

If you like this, checkout [Preact Testing Library](https://testing-library.com/preact).

Use DOM Testing Library to test any JS framework

Use DOM Testing Library with Preact

Kent C Dodds: [00:00] Let's make our `render` function that'll accept some `ui`, and then here we're going to need a `const container = document.createElement('div')`. We're going to `render` our `ui` into that container using **Preact**, so we'll say `Preact.render(ui, container)`, and then we'll `return`.

[00:18] We need to `import getQueriesForElement from 'dom-testing-library'`, and then we'll `return getQueriesForElement(container)`. And with that, our tests are actually failing, and the reason that they're failing is Preact does not `render` synchronously like React does.

### preact.test.js
```jsx
function rendex(ui) {
  const container = document.createElement('div')
  Preact.render(ui, container)
  return getQueriesForElement(container)
}
```

[00:33] Preact will actually wait until the next tick of the event loop to go ahead and re-render. Our `counter` doesn't get updated until the next tick of the event loop, so `dom-testing-library` has the `wait` utility that we can use for this case.

[00:47] We're going to turn this into an `async` test, and after we fire that click, we're going to say `await wait()`, and that effectively just waits till the next tick of the event loop, and then we can go ahead and check if the `counter` has the text content of one and two.

### preact.test.js
```jsx
test('renders a counter', async () => {
  const {getByText} = render(<Counter />)
  const counter = getByText('0')
  fireEvent.click(counter)
  await wait()
  expect(counter).toHaveTextContent('1')
  fireEvent.click(counter)
  await wait()
  expect(counter).toHaveTextContent('2')
})
```

[01:00] With that, our test is passing, so let's just refactor this slightly. I want to also `return` the `container` as well as the `getQueriesForElement`, just in case people want to operate directly on the `container`. Then having to do this `wait` after every single time we call `fireEvent` is kind of annoying.

[01:17] What I did was I created this `fireEventAsync` which will bring in `fireEvent` and `wait` from `dom-testing-library`. And then it iterates through all the methods on `fireEvent`, and adds those two `fireEventAsync`. Effectively, it just takes the original `fireEvent` function, and makes it `async` and calls await.

### fire-event-async.js
```jsx
import {fireEvent, wait} from 'dom-testing-library'

const fireEventAsync = {}

Object.entries(fireEvent).reduce((obj, [key, val]) => {
  obj[key] = async (...args) => {
    const ret = val(...args)
    await wait()
    return ret
  }
  return obj
}, fireEventAsync)

export {fireEventAsync}
```

[01:35] It's effectively doing the same thing that we're doing right here except it does it all on one line. Instead of `fireEvent` from `dom-testing-library`, I'm going to `import {fireEventAsync} from './fire-event-async'`. Then instead of using `fireEvent` and then `wait`, we can just do `fireEventAsync`, `await` that and remove `await` there.

[01:57] We get effectively the same thing without having to add that `wait` manually ourselves. In review, all we had to do for Preact is we create a `container` to `render` our `ui` to, and then we `return` `getQueriesForElement` and that `container`, and then we can have our regular test.

### preact.test.js
```jsx
function render(ui) {
  const container = document.createElement('div')
  Preact.render(ui, container)
  return {
    container,
    ...getQueriesForElement(container),
  }
}

test('renders a counter', async () => {
  const {getByText} = render(<Counter />)
  const counter = getByText('0')
  await fireEventAsync.click(counter)
  expect(counter).toHaveTextContent('1')
  await fireEventAsync.click(counter)
  expect(counter).toHaveTextContent('2')
}
```


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 

. 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.

Intro to Use DOM Testing Library to test any JS framework

To use DOM Testing Library with [React](https://reactjs.org/), 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](https://github.com/kentcdodds/react-testing-library).

If you like this, checkout [React Testing Library](https://testing-library.com/react).

Use DOM Testing Library with React

To use DOM Testing Library with [jQuery](https://jquery.com/), 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.

Use DOM Testing Library with jQuery

To use DOM Testing Library with [Dojo](https://dojotoolkit.org/), we’ll write a custom render function that utilizes the getQueriesForElement function and dojo’s widge-core utilities.

Use DOM Testing Library with Dojo

To use DOM Testing Library with [HyperApp](https://github.com/jorgebucaran/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.

Use DOM Testing Library with HyperApp

To use DOM Testing Library with [AngularJS](https://angularjs.org/), 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.

Use DOM Testing Library with AngularJS

To use DOM Testing Library with [Angular](https://angular.io/), 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](https://testing-library.com/angular).

Use DOM Testing Library with Angular

To use DOM Testing Library with [VueJS](https://vuejs.org/), 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](https://github.com/dfcook/vue-testing-library).

Use DOM Testing Library with VueJS

To use DOM Testing Library with [Mithril](https://mithril.js.org/), 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.

Use DOM Testing Library with Mithril

To use DOM Testing Library with [Svelte](https://svelte.technology/), 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](https://github.com/testing-library/svelte-testing-library).

Use DOM Testing Library with Svelte

To use DOM Testing Library with [from-html](https://github.com/m3g4p0p/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.

Use DOM Testing Library with Preact

Transcript

Use DOM Testing Library with Preact