开玩笑，React测试 - 组件定义缺少显示名称

Question

IM遇到错误：组件定义缺少显示名称在我的React jest Test 中。我发现了有关此问题的不同问题和答案，但是这些答案都不对我的测试有用。有人是否遇到相同的错误并知道如何解决？ 这是我的代码：

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

禁用ESLINT规则绝不是这样的问题，对于此类问题，在您编写组件测试时，在整个项目过程中，一遍又一遍地出现。另外，您应该避免像示例一样避免进行测试道具，因为这是实现细节，如果可能的话，您应该使用RTL，但这是另一个故事。

无论如何，我有一个建议是：

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

这将使之成为现实，因此显示名称是可以模拟的，并且您不必禁用有用的ESLINT规则。

Answer 2

DisplayName属性用于给出React DevTools扩展名的描述性名称，并且在进行测试时，不需要。因此，删除错误的最简单方法是标记此函数，以便ESLINT忽略缺少的显示名称。为此，您可以在jest.fn（） line上方直接添加以下注释：

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

有关此方法还有其他方法，但是为了简单，我只会对其进行评论。如果您想要更多详细信息，请查看这篇文章，这就是我遇到此解决方案的方式：
https://bobbyhadz.com/blog/react-component-is-缺少display-name

hth