https://github.com/nighttrax/vitest-react-mock
vitest matcher for react-mock-component
https://github.com/nighttrax/vitest-react-mock
Last synced: 2 months ago
JSON representation
vitest matcher for react-mock-component
- Host: GitHub
- URL: https://github.com/nighttrax/vitest-react-mock
- Owner: NiGhTTraX
- Created: 2025-06-30T13:04:58.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2025-07-29T01:49:39.000Z (2 months ago)
- Last Synced: 2025-07-29T12:36:35.611Z (2 months ago)
- Language: TypeScript
- Homepage:
- Size: 143 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
vitest matcher for react-mock-component
 [](https://codecov.io/gh/NiGhTTraX/vitest-react-mock) 
----
## Installation
```sh
npm i -D vitest-react-mock
```
## Setup
In your test setup:
```typescript
import 'vitest-react-mock';
```
## Usage
This package extends vitest's [expect](https://vitest.dev/api/expect.html) with the matchers below.
### `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' });
```