为什么react-test-renderer在React中只能在同一个文件中findByType功能组件？

如何解决为什么react-test-renderer在React中只能在同一个文件中findByType功能组件？

这是我正在测试的功能组件 some-table.jsx：

import React from 'react';

const SoMetable = ({ somethings }) => (
  <>
    {somethings.map(something => {
      return <SomeRow key={something} something={something} />
    })}
  </>
);

export const SomeRow = ({ something }) => {
  return <p>{something}</p>
}

export default SoMetable;

这是我的测试文件：

import { create } from "react-test-renderer";
import SoMetable,{ SomeRow } from "../common/ui/some-table";

test("check SoMetable has row",() => {
  const renderer = create(<SoMetable somethings={["Hello","World"]} />);
  const allRows = renderer.root.findAllByType(SomeRow);
  expect(allRows.length).toBe(2);
});

此测试通过。但是，如果我将 SomeRow 移动到它自己的文件中，它就会失败：

some-table.jsx：

import React from 'react';
import { SomeRow } from './some-row';

const SoMetable = ({ somethings }) => (
  <>
    {somethings.map(something => {
      return <SomeRow key={something} something={something} />
    })}
  </>
);

export default SoMetable;

some-row.jsx：

import React from 'react';

export const SomeRow = ({ something }) => {
  return <p>{something}</p>
}

失败：

expect(received).toBe(expected) // Object.is equality

Expected: 2
Received: 0

有什么想法可能是这样吗？感谢阅读。

解决方法

在创建这些 Some... 测试文件以解决的实际场景中，问题是由 React 的 memo() 函数引起的：

import React,{ memo } from 'react';
...
export default memo(SomeRow);

一种解决方法如下：

const allRows = renderer.root.findAllByType(SomeRow.type);

支持 bensampaio for that tip。您还会发现许多其他讨论 on that link 可能对您有帮助，包括：

将 react、react-dom、react-test-renderer 固定到 16.11.0，最重要的是向 react-is@16.11.0 添加依赖项，或使用如下所示的谓词：

const elementByType = (type) => (element) => (
    element.type === type // Match non-memo'd
    || element.type === type.type // Match memo'd
);

还应该指出的是，我也做了一些愚蠢的事情。进口是错误的。这：

import SomeTable,{ SomeRow } from "../common/ui/some-table";

应该是这样的：

import SomeTable from "../common/ui/some-table";
import { SomeRow } from "../common/ui/some-row";