https://github.com/danielmschmidt/jest-react-rendering
https://github.com/danielmschmidt/jest-react-rendering
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/danielmschmidt/jest-react-rendering
- Owner: DanielMSchmidt
- Created: 2019-04-12T10:15:48.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2025-04-30T17:09:20.000Z (about 1 year ago)
- Last Synced: 2025-04-30T18:25:03.136Z (about 1 year ago)
- Language: JavaScript
- Size: 737 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Jest Environment React Rendering [](https://travis-ci.com/DanielMSchmidt/jest-react-rendering)
This is a jest environment extending [`jest-environment-jsdom`](https://github.com/facebook/jest/tree/master/packages/jest-environment-jsdom) with helpers inspired by [maicki/why-did-you-update](https://github.com/maicki/why-did-you-update).
The goal is to make rendering improvements testable.
## Setup
`npm install --save-dev jest-react-rendering`
As this environment mutates React you don't want to use it everywhere, we suggest you enable it per test case via a comment.
We bring a mutated copy of React which you need to use, therefore please don't do `import React from "react"` in your tests.
```js
/**
* @jest-environment react-rendering
*/
const React = global.React;
```
## Usage
```js
/**
* @jest-environment react-rendering
*/
const React = global.React;
import TestRenderer from "react-test-renderer";
class Counter extends React.Component {
constructor() {
super();
this.state = {
count: 0
};
this.increment = this.increment.bind(this);
}
increment() {
this.setState(state => ({
count: state.count + 1
}));
}
render() {
return (
{this.state.count}
Inc
);
}
}
describe("Counter", () => {
it("does not update on initial render", () => {
TestRenderer.create();
expect(MyComponent).toBeUpdatedTimes(0);
});
it("updates when the button is clicked", () => {
const renderer = TestRenderer.create();
const instance = renderer.root;
const button = instance.find(el => el.type == "button");
button.props.onClick();
expect(Counter).toBeUpdatedTimes(1);
});
});
```