在组件中使用 React.Children 时，Jest 和 React 测试库返回未定义的错误

Question

我有一个组件，它在内部使用React.Children在渲染它时对子组件进行一些更改。 当我尝试使用 Jest 和 React 测试库对其进行测试时，我收到错误TypeError: Cannot read properties of undefined (reading 'Children') ，它指向我正在使用React.Children.map的行。

我试图编写一个简单的组件，看看它是否是更复杂的组件的问题，但它似乎也在发生。 这是我创建的测试组件：

import React from 'react';

export default function Testing({ children }) {
  return <div>{React.Children.map(children, (child) => child)}</div>;
}

这是测试：

import { render } from '@testing-library/react';

import Testing from './Testing';

describe('Home', () => {
  it('should render successfully', () => {
    const { baseElement } = render(<Testing>Testing</Testing>);
    expect(baseElement).toBeTruthy();
  });
});

这是返回的错误：

       detail: TypeError: Cannot read properties of undefined (reading 'Children')
          at Testing (/Users/user/projects/my-project/src/features/Home/Testing.tsx:4:22)

我尝试将 React 导入到测试中，看看它是否会有所作为，但我没有。 我还尝试在 Jest 和 React 测试库文档中查找此内容，但我找不到任何东西。 我在互联网上也找不到对这个问题的引用，这有点奇怪，因为我相信我不是第一个在内部测试使用React.Children的组件的人。

欢迎任何帮助！ 谢谢！

Answer 1

这是因为孩子是未定义的。 尝试在您的代码中使用React?.Children?.map(children, (child) => child)