Jest React-未写入新快照.必须显式传递update标志以写入新快照 [英] Jest React - New snapshot was not written. The update flag must be explicitly passed to write a new snapshot
问题描述
我有一个用React模板创建的asp.net核心项目,试图用Jest快照对一个简单的组件进行单元测试,并且收到以下错误.有人可以建议如何修复它.
I have a asp.net core project created with React template, trying to unit test a simple component with Jest snapshot and I am receiving below error.Can any one suggest how to fix it.
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { Button } from 'reactstrap'
const CloseHistoryButton = ({ onClick }) =>
<div className="d-flex justify-content-end">
<Button color="danger" size="sm" onClick={onClick}>
<FontAwesomeIcon icon="times" /> Close History
</Button>
</div>
export default CloseHistoryButton
CloseHistoryButton.test
import ReactDOM from 'react-dom';
import { shallow, mount, render } from 'enzyme';
import { cleanup } from '@testing-library/react';
import renderer from 'react-test-renderer';
import CloseHistoryButton from '../CloseHistoryButton/index';
import registerIcons from './../../../../icons/registerIcons';
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });
// automatically unmount and cleanup DOM after the test is finished.
afterEach(cleanup);
registerIcons();
test('renders correctly', () => {
const tree = renderer.create(
<CloseHistoryButton />
).toJSON();
expect(tree).toMatchSnapshot();
});
错误日志:
期望(已接收).toMatchSnapshot()
Error Log:
expect(received).toMatchSnapshot()
New snapshot was not written. The update flag must be explicitly passed to write a new snapshot.
This is likely because this test is run in a continuous integration (CI) environment in which snapshots are not written by default.
Received value
<div
className="d-flex justify-content-end"
>
<button
aria-label={null}
className="btn btn-danger btn-sm"
onClick={[Function]}
>
<svg
aria-hidden="true"
className="svg-inline--fa fa-times fa-w-11 "
data-icon="times"
data-prefix="fas"
focusable="false"
role="img"
style={Object {}}
viewBox="0 0 352 512"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
fill="currentColor"
style={Object {}}
/>
</svg>
Close History
</button>
</div>
27 | <CloseHistoryButton />
28 | ).toJSON();
> 29 | expect(tree).toMatchSnapshot();
| ^
30 | });
31 |
32 | describe('Test Button component', () => {
at Object.toMatchSnapshot (src/features/FleetImport/Results/CloseHistoryButton/CloseHistoryButton.test.js:29:18)
› 1个快照失败.
快照摘要
› 1个测试套件中有1个快照失败.检查您的代码更改或使用-u
重新运行以进行更新.
› 1 snapshot failed.
Snapshot Summary
› 1 snapshot failed from 1 test suite. Inspect your code changes or re-run jest with -u
to update them.
测试套件:1个失败,1个通过,总共2个 测试:1个失败,3个通过,总共4个 快照:1个失败,总共1个 时间:4.338秒 运行所有测试套件. npm ERR!测试失败.有关更多详细信息,请参见上文.
Test Suites: 1 failed, 1 passed, 2 total Tests: 1 failed, 3 passed, 4 total Snapshots: 1 failed, 1 total Time: 4.338s Ran all test suites. npm ERR! Test failed. See above for more details.
推荐答案
在运行测试的package.json脚本中,在运行react-scripts test -u
之类的测试时,请追加-u
来更新快照.这应该可以修复CI中的快照测试.
In your package.json script which runs the tests append -u
to update the snapshot while running the test like react-scripts test -u
. This should fix the snapshot test in CI.
这篇关于Jest React-未写入新快照.必须显式传递update标志以写入新快照的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!