Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sunesimonsen/react-dom-testing
A tiny wrapper around react-dom/test-utils to make it more convenient.
https://github.com/sunesimonsen/react-dom-testing
Last synced: 1 day ago
JSON representation
A tiny wrapper around react-dom/test-utils to make it more convenient.
- Host: GitHub
- URL: https://github.com/sunesimonsen/react-dom-testing
- Owner: sunesimonsen
- License: mit
- Created: 2018-03-16T21:39:28.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2024-05-02T10:42:14.000Z (5 months ago)
- Last Synced: 2024-09-19T20:10:57.562Z (14 days ago)
- Language: JavaScript
- Homepage:
- Size: 64.5 KB
- Stars: 37
- Watchers: 3
- Forks: 2
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-list - react-dom-testing - dom/test-utils to make it more convenient. | sunesimonsen | 40 | (JavaScript)
README
# react-dom-testing
[](https://travis-ci.org/sunesimonsen/react-dom-testing)
A minimal React DOM testing utility based on [react-dom/test-utils](https://reactjs.org/docs/test-utils.html).
## Install
```sh
npm install --save react-dom-testing
```
## Platform support
The library is ES5 compatible and will work with any JavaScript bundler in the browser as well as Node versions with ES5 support.
## Usage
Use the `mount` function to render a React component into the DOM, the function returns the rendered DOM node. Now you can start asserting:
```js
import { mount } from 'react-dom-testing';
import React from 'react';
const Hello = ({ children }) => (
Hello:
{children}
);
const node = mount(Jane Doe);
assert.equal(
node.querySelector("[data-test=value]").textContent,
"Jane Doe"
);
```
You can use plain DOM or any DOM query library you want. You can use any fancy assertion library that have assertions for the DOM or just stick to plain asserts, you decide.
Here is the above example using [unexpected-dom](https://github.com/unexpectedjs/unexpected-dom/):
```js
import expect from 'unexpected';
import unexpectedDom from 'unexpected-dom';
expect.use(unexpectedDom);
expect(
mount(Jane Doe),
"queried for first",
"[data-test=value]",
"to have text",
"Jane Doe"
);
```
That will give you some really fancy output if it fails.
## API
### mount
Renders a React component into the DOM and returns the DOM node.
```js
const node = mount(Jane Doe);
```
In case you want to specify the container element that your component will be
rendered into, you can do that the following way:
``` js
const node = mount(Jane Doe, { container: 'span' });
```
or
``` js
const node = mount(Jane Doe, {
container: document.createElement('span')
});
```
### unmount
Unmount a mounted component from the DOM.
You normally don't need to unmount components, it is only when your component has some side-effect that messes with the environment, like writing to the HTML body the unmount need to run to clean up. That of cause depends on the component actually cleaning up after itself.
```js
const node = mount(Jane Doe);
unmount(node);
```
### simulate
A function to simulate one or more events using `Simulate` object from
[react-dom/test-utils](https://reactjs.org/docs/test-utils.html).
The function takes an array of events or a single event. Each event has the
following form:
```js
{
type: 'change', // The event type
value: 'My value', // will be set on target when specified
target: 'input', // an optional CSS selector specifying the target
}
```
You can also specify event data for
[Simulate](https://reactjs.org/docs/test-utils.html#simulate):
```js#evaluate:false
{
type: "keyDown",
target: "input",
data: {
keyCode: 13
}
}
```
If you don't specify a target, the event will be issued on the root element of
the given component.
I case you just want to specify the type, you can just give a string instead of
an event object:
```js
const component = mount(Click me!);
// Simulate one click
simulate(component, 'click');
// Simulate two clicks
simulate(component, ['click', 'click']);
```
```js
class PeopleList extends Component {
constructor(props) {
super(props);
this.state = {
name: "",
people: []
};
}
render() {
const { name, people } = this.state;
return (
{people.map((person, i) => - {person}
)}
Name:
this.setState({ name: e.target.value })}
data-test="name-input"
/>
this.setState(({ name, people }) => ({
name: "",
people: [...people, name]
}))
}
data-test="add-person"
>
Add
);
}
}
const peopleList = mount();
simulate(peopleList, [
{ type: "change", target: "[data-test=name-input]", value: "Jane Doe" },
{ type: "click", target: "[data-test=add-person]" },
{ type: "change", target: "[data-test=name-input]", value: "John Doe" },
{ type: "click", target: "[data-test=add-person]" }
]);
expect(
peopleList,
"queried for first",
"[data-test=people]",
"to satisfy",
mount(
- Jane Doe
- John Doe
)
);
```
### act
This is just the https://reactjs.org/docs/test-utils.html#act
`act` is useful when you need to force a state transition like resolving a mocked promise:
```js
it("supports asynchronous components", () => {
const component = mount();
expect(component, "to have text", "Waiting...");
act(() => {
fakePromise.resolve("wat");
});
expect(component, "to have text", "wat");
});
```
See the tests for more details.
## License
[MIT © Sune Simonsen](./LICENSE)