Тесты моментальных снимков React Jest не работают, если включен флаг --coverage
Я создал приложение React (v16.13.1) и тестирую его с помощью Jest (v25.1.0). Когда я бегуnpm test
все тесты проходят нормально, но когда я бегу npm test -- --coverage
все компоненты возвращаются undefined
и все тесты моментальных снимков терпят неудачу.
Это происходит с каждым компонентом приложения. Типичный пример компонента, демонстрирующего такое поведение:
src/components/Card.js
import React from 'react';
import PropTypes from 'prop-types';
const Card = ({ title, subtitle, children }) => (
<div className="card">
{title && <div className="card-header">{title}</div>}
<div className="card-body">
{subtitle && <div className="small mb-3">{subtitle}</div>}
<div className="mt-3">{children}</div>
</div>
</div>
);
Card.propTypes = {
title: PropTypes.string,
subtitle: PropTypes.string,
children: PropTypes.node.isRequired
};
Card.defaultProps = {
title: null,
subtitle: null
};
export default Card;
src/components/Card.test.js
import React from 'react';
import renderer from 'react-test-renderer';
import Card from './Card';
let tree;
describe('without title or subtitle', () => {
beforeAll(() => {
tree = renderer.create(
<Card>
<p>Hello there</p>
</Card>
);
});
it('renders correctly', () => {
expect(tree).toMatchSnapshot();
});
});
describe('with title and subtitle', () => {
beforeAll(() => {
tree = renderer.create(
<Card title="Test" subtitle="This is a test">
<p>Hello there</p>
</Card>
);
});
it('renders correctly', () => {
expect(tree).toMatchSnapshot();
});
});
Раньше все эти тесты проходили нормально, но теперь они не проходят, но только когда coverage
флаг включен.
Что я делаю неправильно?
1 ответ
Я думаю, что видел это раньше: для компонентов без состояния вам может потребоваться определить свойство displayName. https://github.com/facebook/jest/issues/1824