https://github.com/nighttrax/jest-react-mock
https://github.com/nighttrax/jest-react-mock
Last synced: 4 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/nighttrax/jest-react-mock
- Owner: NiGhTTraX
- Created: 2020-01-21T20:23:54.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-05-22T12:46:58.000Z (over 1 year ago)
- Last Synced: 2024-05-22T13:56:06.839Z (over 1 year ago)
- Language: TypeScript
- Size: 1.19 MB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
jest matcher for react-mock-component
 [](https://codecov.io/gh/NiGhTTraX/jest-react-mock) 
----
## Installation
With npm
```sh
npm i -D jest-react-mock
```
or with yarn
```sh
yarn add -D jest-react-mock
```
## Setup
In your test setup:
```typescript
import 'jest-react-mock';
```
## Usage
### `toBeMounted`
Checks that a mock component is currently mounted.
```typescript jsx
import createReactMock from 'react-mock-component';
import React from 'react';
import {render, unmount} from 'react-dom';
const Mock = createReactMock();
expect(Mock).not.toBeMounted();
render();
expect(Mock).toBeMounted();
unmount();
expect(Mock).not.toBeMounted();
```
### `toHaveBeenRendered()`
Checks that a mock component has been rendered at least once.
```typescript jsx
import createReactMock from 'react-mock-component';
import React from 'react';
import {render} from 'react-dom';
const Mock = createReactMock();
expect(Mock).not.toHaveBeenRendered();
render();
expect(Mock).toHaveBeenRendered();
```
This is slightly different from `toBeMounted`: if the component gets unmounted `toBeMounted` will throw whereas `toHaveBeenRendered` will continue to pass.
### `toHaveBeenRenderedWith(props)`
Checks that a mock component has been rendered with the expected props at least once. If you want to check only the last render then use [`toHaveProps`](#tohavepropsprops).
You can pass a subset of the props and they will be deeply matched against the received ones.
```typescript jsx
import createReactMock from 'react-mock-component';
import React from 'react';
import {render} from 'react-dom';
const Mock = createReactMock<{ foo: string, bar: number }>();
render();
expect(Mock).toHaveBeenRenderedWith({ foo: 'bar' });
```
### `toHaveProps(props)`
Checks that a mock component's last received props match the expected ones. If you want the check all renders and not just the last one then use [`toHaveBeenRenderedWith`](#tohavebeenrenderedwithprops).
You can pass a subset of the props and they will be deeply matched against the received ones.
```typescript jsx
import createReactMock from 'react-mock-component';
import React from 'react';
import {render} from 'react-dom';
const Mock = createReactMock<{ foo: string, bar: number }>();
render();
expect(Mock).toHaveProps({ foo: 'bar' });
```