Install it like this:
yarn add enzyme enzyme - adapter - react - 16 -- registry = "https://registry.npmjs.org"
Then configure your enzyme to work with react 16. Add to package.json:
"jest" : {
"setupTestFrameworkScriptFile" : "<rootDir>/jest.custom_config.js"
}
If you are using create-react-app, then you should not override package.json but create a file in default location instead, which is src/setupTests.js.
import { configure } from 'enzyme' ;
import Adapter from 'enzyme-adapter-react-16' ;
configure ( { adapter : new Adapter ( ) } ) ;
The main idea is:
// __tests__/CheckboxWithLabel-test.js
import React from 'react' ;
import { shallow } from 'enzyme' ;
import CheckboxWithLabel from '../CheckboxWithLabel' ;
test ( 'CheckboxWithLabel changes the text after click' , ( ) = > {
// Render a checkbox with label in the document
const checkbox = shallow ( < CheckboxWithLabel labelOn = "On" labelOff = "Off" / > ) ;
expect ( checkbox . text ( ) ) . toEqual ( 'Off' ) ;
checkbox . find ( 'input' ) . simulate ( 'change' ) ;
expect ( checkbox . text ( ) ) . toEqual ( 'On' ) ;
} ) ;
OR
import React from 'react' ;
import ReactDOM from 'react-dom' ;
import App from './App' ;
import { shallow } from 'enzyme' ;
describe ( 'App' , ( ) = > {
it ( 'shows expected contents' , ( ) = > {
const component = shallow ( < App / > ) ;
expect ( component . text ( ) ) . toMatch ( 'Welcome to React' ) ;
} ) ;
} ) ;
https://facebook.github.io/jest/docs/en/tutorial-react.html https://github.com/airbnb/enzyme/issues/1265 https://stackoverflow.com/a/46810504/801426 https://jest-bot.github.io/jest/docs/expect.html
Similar Posts