Jest React - 未写入新快照.必须显式传递更新标志才能写入新快照

Question

我有一个使用 React 模板创建的 asp.net 核心项目，试图使用 Jest 快照对一个简单的组件进行单元测试，我收到以下错误。任何人都可以建议如何解决它。

索引.js

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  

关闭历史记录按钮.测试

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();
});

错误日志：

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重新运行 jest 以更新它们。

测试套件：1 个失败，1 个通过，共 2 个 测试：1 次失败，3 次通过，总共 4 次 快照：1 个失败，共 1 个 时间：4.338秒 已运行所有测试套件。 呵呵！测试失败。 有关更多详细信息，请参见上文。

Answer 1

在运行测试的 package.json 脚本中，附加-u以在运行测试时更新快照，如react-scripts test -u.这应该修复 CI 中的快照测试。

Answer 2

只需在 CI 配置中显式传递它，例如：

- yarn test -- --coverage --updateSnapshot

Answer 3

问题的两种解决方案 1( 从 package.json 中删除 cross-env CI=true 或 2( 设置 CICD 以运行单元测试。--- 为此，请在构建管道中添加一个 npm 任务，并在任务中选择选项作为"自定义"，并提供命令作为测试

每当触发构建时，这应该触发单元测试。