jest-mock-react
v0.0.6
Published
Mock react component and jest expect extensions
Downloads
21
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
- Install the module as one of your project's
devDependencies
:
npm install --save-dev jest-mock-react
- Add plugin
jest-mock-react/babel
to your babel configuration. Either in.babelrc
,.babelrc.js
,babel.config.js
orpackage.json
"babel": {
"plugins": [
"jest-mock-react/babel"
]
},
- Add
jest-mock-react/extend-expect.js
to your jest configuration. Either injest.config.js
orpackage.json
"jest": {
"setupFilesAfterEnv": [
"jest-mock-react/extend-expect.js"
]
},
Usage
- 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', () => {
...
})
- 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