Jest，React 测试 - 组件定义缺少显示名称

Question

我收到错误：组件定义在我的反应 jest 测试 中缺少显示名称。我发现了不同的问题和答案，但是 none 这个答案对我的测试很有用。有人遇到过同样的错误并且知道如何解决吗？这是我的代码：

const mockPdfCountriesTable = jest.fn();
jest.mock(
  '@components/admin/PdfReport/PdfCountriesPage/PdfCountriesPageTable',
  () => (props) => {
    mockPdfCountriesTable(props);
    return <mockPdfCountriesTable />;
  }
);

describe('PdfReport', () => {
  let wrapper;
  let sortedCountries;
  let attendeeCountries;
  beforeEach(() => {
    const scaleLinear = jest.fn();
    const geoMercator = jest.fn();
    const getSupportedLanguage = jest.fn();
    scaleLinear();
    geoMercator();
    getSupportedLanguage();
    attendeeCountries = {
      US: {
        value: 3324,
        alpha3: 'USA',
      },
      RU: {
        value: 90,
        alpha3: 'RUS',
      },
      CN: {
        value: 675,
        alpha3: 'CHN',
      },
    };
    sortedCountries = [
      {
        value: 3324,
        alpha3: 'USA',
      },
      {
        value: 675,
        alpha3: 'CHN',
      },
      {
        value: 90,
        alpha3: 'RUS',
      },
    ],
    wrapper = mount(
      <PdfCountriesPage attendeeCountries={attendeeCountries} />
    );
  });
  it('Renders <PdfCountriesPageTable/> child component props', () => {
    expect(mockPdfCountriesTable).toHaveBeenCalledWith(
      expect.objectContaining({
        sortedCountriesArray: sortedCountries,
      })
    );
  });
});

谢谢！

Answer 1

displayName 属性用于为 React devtools 扩展提供描述性名称，因为您是运行测试，所以不需要这样做。因此，消除错误的最简单方法是标记此函数，以便 eslint 忽略缺少的 displayName。为此，您可以直接在 jest.fn() 行上方添加以下注释：

// eslint-disable-next-line react/display-name

因此，对于您的测试，您可以将其更改为：

const mockPdfCountriesTable = jest.fn();
// eslint-disable-next-line react/display-name
jest.mock(
  '@components/admin/PdfReport/PdfCountriesPage/PdfCountriesPageTable',
  () => (props) => {
    mockPdfCountriesTable(props);
    return <mockPdfCountriesTable />;
  }
);

还有其他解决方法，但为了测试简单起见，我将其注释掉。如果您想了解更多详细信息，请查看此 post，这就是我遇到此解决方案的方式： https://bobbyhadz.com/blog/react-component-is-missing-display-name

HTH

Jest，React 测试 - 组件定义缺少显示名称

Jest, React test - Component definition is missing display name

reactjs

testing

jestjs

enzyme