[React] Use Jest's Snapshot Testing Feature
Often when testing, you use the actual result to create your assertion and have to manually update it as you make changes to the feature. With Jest snapshot testing, you can let Jest do this part for you and write more tests and features faster and with more confidence. Let's learn about how you can use Jest snapshot testing to improve your own workflow.
Using different renderer lib:
import React from 'react' import TestUtils from 'react-addons-test-utils'; import renderer from 'react-test-renderer' test('jsx', () => { const renderer = TestUtils.createRenderer(); renderer.render(<MyComponent name="John" />); const component = renderer.getRenderOutput(); expect(component).toMatchSnapshot() }); test('jsx: example2', () => { const component = renderer.create(<MyComponent name="John" />) expect(component).toMatchSnapshot() })
So first test eusing 'react-addons-test-utils' lib and second test using 'react-test-renderer' lib.
Sometime you might will 'expect' lib form npm, but Jest also include global 'expect' function, so to avoid conflict:
import React from 'react'; import TestUtils from 'react-addons-test-utils'; import expectLib from 'expect'; import expectJSX from 'expect-jsx'; import Box from '../components/Box'; Object.assign({}, expect, expectLib, expectJSX); it('should rendering the string', () => { const renderer = TestUtils.createRenderer(); renderer.render(<Box color="green" id="2" />); const result = renderer.getRenderOutput(); expect(result).toMatchSnapshot() });
So later if you change the Box component, the test will faild. Because the snapshots are not updated, you can simply type 'u' in command line to update the snapshots, then the tests will pass.
相关文章
- React页面隐藏#
- react 使用hooks
- [Typescript + React] Tips: Write your own 'PropsFrom' helper to extract props from any React component
- [React] Avoiding state flickers
- [React] Spread Component Props in JSX with React
- [React] Setup 'beforeunload' listener
- [Redux] Generating Containers with connect() from React Redux (FooterLink)
- [React] State and Callbacks Don’t Mix Well in React
- [React Testing] Debug the DOM State During Tests using React Testing Library’s debug Function
- [React GraphQL] Pass Parameters to urql's useQuery React Hook
- [React] Define defaultProps and PropTypes as static methods in class component
- React中怎么实现状态自动保存(KeepAlive)?