https://github.com/mmmurray/jest-component-snapshot
Component snapshot testing made easy.
https://github.com/mmmurray/jest-component-snapshot
a11y a11y-testing jest jest-snapshots puppeteer react snapshot snapshot-testing typescript
Last synced: about 2 months ago
JSON representation
Component snapshot testing made easy.
- Host: GitHub
- URL: https://github.com/mmmurray/jest-component-snapshot
- Owner: mmmurray
- License: mit
- Created: 2019-03-05T19:28:19.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T17:23:24.000Z (over 2 years ago)
- Last Synced: 2025-02-17T09:06:22.906Z (3 months ago)
- Topics: a11y, a11y-testing, jest, jest-snapshots, puppeteer, react, snapshot, snapshot-testing, typescript
- Language: TypeScript
- Homepage:
- Size: 1.65 MB
- Stars: 7
- Watchers: 1
- Forks: 0
- Open Issues: 22
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# jest-component-snapshot 📸
[](https://travis-ci.com/mmmurray/jest-component-snapshot)
[](https://www.npmjs.com/package/jest-component-snapshot)
[](https://opensource.org/licenses/MIT)
Component snapshot testing made easy.
## Install ⚙️
```bash
yarn add -D jest-component-snapshot puppeteer
```
## Usage 🤖
The recommended way to use this library is by adding the following to your Jest config:
```json
{
"globalSetup": "jest-component-snapshot/setup",
"globalTeardown": "jest-component-snapshot/teardown",
"setupFilesAfterEnv": ["jest-component-snapshot/extend-expect"]
}
```
This config is optional - the `globalSetup` and `globalTeardown` functions ensure that the same instance of Puppeteer is shared between tests to improve performance. If you do not set these options then a new instance of Puppeteer will be launched for each test.
If you cannot configure `setupFilesAfterEnv` (such as in [create-react-app](https://github.com/facebook/create-react-app)), you can manually extend Jest in your test files using:
```js
import { extendExpect } from 'jest-component-snapshot'
extendExpect()
```
### Image snapshot tests
Creates an image snapshot from a component using [jest-image-snapshot](https://www.npmjs.com/package/jest-image-snapshot). All of the same options are supported.
```js
test('image snapshot from HTML string', () => {
expect('
Hello world
').toMatchImageSnapshot()
})
test('image snapshot from DOM element', () => {
const headingElement = document.createElement('h1')
headingElement.innerHtml = 'Hello world'
expect(headingElement).toMatchImageSnapshot()
})
test('image snapshot from React element', () => {
expect(
Hello world
).toMatchImageSnapshot()
})
```
### A11y snapshot tests
Uses Puppeteer to create an [accessibility tree snapshot](https://pptr.dev/#?product=Puppeteer&show=api-class-accessibility). The snapshot is converted to YAML for readability and empty properties and generic containers are removed.
```js
test('a11y snapshot from HTML string', () => {
expect('
Hello world
').toMatchA11ySnapshot()
})
test('a11y snapshot from DOM element', () => {
const headingElement = document.createElement('h1')
headingElement.innerHtml = 'Hello world'
expect(headingElement).toMatchA11ySnapshot()
})
test('a11y snapshot from React element', () => {
expect(
Hello world
).toMatchA11ySnapshot()
})
```
### DOM snapshot tests
Snapshots formatted HTML for the given component.
```js
test('DOM snapshot from HTML string', () => {
expect('
Hello world
').toMatchDomSnapshot()
})
test('DOM snapshot from DOM element', () => {
const headingElement = document.createElement('h1')
headingElement.innerHtml = 'Hello world'
expect(headingElement).toMatchDomSnapshot()
})
test('DOM snapshot from React element', () => {
expect(
Hello world
).toMatchDomSnapshot()
})
```
## Alternatives 🙌
- [jest-puppeteer](https://github.com/smooth-code/jest-puppeteer)
- [jest-image-snapshot](https://www.npmjs.com/package/jest-image-snapshot)