# jest-mock-react

> Mock react component and jest expect extensions

Latest version **0.0.6** (published 2020-04-10) · ISC license · 0 weekly downloads

## Install

```sh
npm install jest-mock-react
pnpm add jest-mock-react
yarn add jest-mock-react
bun add jest-mock-react
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.6 |
| Published | 2020-04-10 |
| First published | 2020-04-10 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 22.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 10 |
| Author | Salah |
| Maintainers | salah49 |

## Links

- npm: https://www.npmjs.com/package/jest-mock-react
- Repository: https://github.com/thesalah/jest-mock-react
- Homepage: https://github.com/thesalah/jest-mock-react#readme
- Issues: https://github.com/thesalah/jest-mock-react/issues
- npm.io page: https://npm.io/package/jest-mock-react

## Dependencies (6)

- [react](https://npm.io/package/react.md) ^16.13.1
- [lodash](https://npm.io/package/lodash.md) ^4.17.15
- [jest-matcher-utils](https://npm.io/package/jest-matcher-utils.md) ^25.2.7
- [@babel/preset-react](https://npm.io/package/@babel/preset-react.md) ^7.9.4
- [react-test-renderer](https://npm.io/package/react-test-renderer.md) ^16.13.1
- [babel-preset-react-app](https://npm.io/package/babel-preset-react-app.md) ^9.1.2

## Recent versions

- 0.0.6 (latest) — 2020-04-10
- 0.0.5 — 2020-04-10
- 0.0.4 — 2020-04-10
- 0.0.3 — 2020-04-10
- 0.0.2 — 2020-04-10
- 0.0.1 — 2020-04-10

## README

# Jest Mock React
Don't like shallow rendering and want to mock specific child components for your component tests? Jest Mock React helps you to easily mock components and assert on the rendered component.

## Installation

1. Install the module as one of your project's `devDependencies`:

```
npm install --save-dev jest-mock-react
```

2. Add plugin `jest-mock-react/babel` to your babel configuration. Either in `.babelrc`, `.babelrc.js`, `babel.config.js` or `package.json`

```
  "babel": {
    "plugins": [
      "jest-mock-react/babel"
    ]
  },
```

2. Add `jest-mock-react/extend-expect.js` to your jest configuration. Either in `jest.config.js` or `package.json`

```
  "jest": {
    "setupFilesAfterEnv": [
      "jest-mock-react/extend-expect.js"
    ]
  },
```

## Usage

1. Use `mockComponents` function to mock react components. You do not need to import this function in your test file. You can pass all your components to be mocked as argument.

```
import { render } from '@testing-library/react';
import App from './App';
import InnerComp from './InnerComp';
import { InnerComp2 } from './InnerComp2';

mockComponents(InnerComp, InnerComp2);

test('should render App', () => {
  ...
})
```

2. Use custom matchers described below to assert on the component mocked.

### Custom matchers

 #### 1. toHaveBeenRendered ####
```
import { render } from '@testing-library/react';
import App from './App';
import InnerComp from './InnerComp';
import { InnerComp2 } from './InnerComp2';

mockComponents(InnerComp, InnerComp2);

test('should render App', () => {
  render(<App />)
  expect(InnerComp).toHaveBeenRendered()
})
```

 #### 2. toHaveBeenRenderedTimes ####
```
import { render } from '@testing-library/react';
import App from './App';
import InnerComp from './InnerComp';
import { InnerComp2 } from './InnerComp2';

mockComponents(InnerComp, InnerComp2);

test('should render App', () => {
  render(<App />)
  expect(InnerComp).toHaveBeenRenderedTimes(2)
})
```

 #### 3. toHaveBeenRenderedWithProps ####
```
import { render } from '@testing-library/react';
import App from './App';
import InnerComp from './InnerComp';
import { InnerComp2 } from './InnerComp2';

mockComponents(InnerComp, InnerComp2);

test('should render App', () => {
  render(<App />)
  expect(InnerComp).toHaveBeenRenderedWithProps({
    prop1: 'value1',
    prop2: 'value2',
  })
})
```

 #### 4. toHaveBeenRenderedWithProp ####
```
import { render } from '@testing-library/react';
import App from './App';
import InnerComp from './InnerComp';
import { InnerComp2 } from './InnerComp2';

mockComponents(InnerComp, InnerComp2);

test('should render App', () => {
  render(<App />)
  expect(InnerComp).toHaveBeenRenderedWithProps('prop1')
  expect(InnerComp2).toHaveBeenRenderedWithProps('prop1', 'value1')
})
```


## LICENSE

MIT

---
_Source: https://npm.io/package/jest-mock-react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._