1

我已经构建了一个 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启用标志时才会失败。

我究竟做错了什么？

4

1 回答 1

0

我想我以前见过这个：对于无状态组件，您可能需要定义 displayName 属性。 https://github.com/facebook/jest/issues/1824#issuecomment-250478026

于 2020-03-23T22:24:38.377 回答