Jest React - Новый снимок не был написан. Для записи нового снимка необходимо явно передать флаг обновления.
У меня есть основной проект asp.net, созданный с помощью шаблона React, я пытаюсь выполнить модульное тестирование простого компонента с помощью снимка Jest, и я получаю ошибку ниже. Может ли кто-нибудь предложить, как это исправить.
index.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
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()
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 набора тестов. Проверьте изменения кода или повторно запустите jest с помощью-u чтобы обновить их.
Наборы тестов: 1 неудачный, 1 пройденный, всего 2 теста: 1 неудачный, 3 пройденных, всего 4 моментальных снимка: 1 неудачный, всего 1 Время: 4,338 с Выполнены все наборы тестов. npm ERR! Тест не пройден. Подробнее см. Выше.
3 ответа
В вашем скрипте package.json, который запускает тесты, добавьте -u чтобы обновить снимок при запуске теста, например react-scripts test -u. Это должно исправить тест снимка в CI.
Просто явно передайте его в конфигурации CI, например:
- yarn test -- --coverage --updateSnapshot
Два решения проблемы: 1) удалить cross-env CI=true из package.json ИЛИ 2) Настроить CICD для запуска модульных тестов.--- Для этого добавьте задачу npm в конвейер сборки и выберите параметр в задача как "пользовательская" и предоставить команду как тест
это должно запускать модульные тесты всякий раз, когда запускается сборка.