TypeError：创建自定义渲染时，React.createElement 不是函数

Question

我从react-testing-library创建了一个自定义渲染方法，以便用必要的提供程序包装我的react组件，但是当我运行测试套件时，我收到类型错误。下面分别是我的自定义渲染、测试和测试结果。我似乎无法弄清楚为什么它会抛出此错误，也无法从其他帖子中找到相关答案。任何方向都非常感激。

/* eslint-disable import/export */
import React, { FC, ReactElement } from 'react'
import { render, RenderOptions } from '@testing-library/react'
import { IntlProvider } from 'react-intl'
import messages from '~/src/locales/en-us.json'

const AllTheProviders: FC = ({ children }) => {
  return (
    <IntlProvider locale="en-us" defaultLocale="en-us" messages={messages}>
      {children}
    </IntlProvider>
  )
}

const customRender = (
  ui: ReactElement,
  options?: Omit<RenderOptions, 'wrapper'>
) => render(ui, { wrapper: AllTheProviders, ...options })

export * from '@testing-library/react'
export { customRender as render }

test('loads and displays greeting', () => {
  render(
    <Button
      textId="Click here!"
      type="primary"
      onClick={() => console.log('hi')}
    />
  )

  expect(screen.getByText('Click here!')).toBeInTheDocument()
})

 FAIL  src/components/library/Button/Button.test.tsx
  ● loads and displays greeting

    TypeError: React.createElement is not a function

      16 |   ui: ReactElement,
      17 |   options?: Omit<RenderOptions, 'wrapper'>
    > 18 | ) => render(ui, { wrapper: AllTheProviders, ...options })
         |      ^
      19 |
      20 | export * from '@testing-library/react'
      21 | export { customRender as render }

Answer 1

就我而言，当

jest.config.js

文件中的某些字段重复时，就会发生这种情况。

我有多个模块目录。

moduleDirectories: ["node_modules", "src"], 
moduleDirectories: [".", "src"], // -> This one should be removed

当我删除不正确的字段时，一切正常。

moduleDirectories: ["node_modules", "src"], 

版本：

 "jest": "^27.0.6",
 "jest-cli": "^27.0.6",
 "babel-jest": "^27.0.6",
 "@types/jest": "^27.0.6",
 "@testing-library/jest-dom": "^5.14.1",