如何使用反应测试库模拟反应组件？

Question

我有一个反应组件，它有两个子组件，如下所示：

import {Child1} from './child1';
import {Child2} from './child2';
...
return (
  <>
    <Child1 />
    <Child2 />
  </>
)

我正在使用 Reacttesting-library和创建的应用程序create react app，而不是弹出。我想在我的单元测试中模拟它们，因为它们有自己的测试，所以我试图：

jest.mock('./child1', () => 'some mocked string');
jest.mock('./child1', () => 'some mocked string');

但是当我使用它渲染它时，import { render } from '@testing-library/react';我看到以下内容Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined。

这是为什么？我如何模拟这些组件？

Answer 1

child1模块child2使用命名导出来导出其组件。您应该模拟指定的导出组件Child1和Child2.

\n

下面的示例使用无状态功能组件模拟这两个模块及其组件。

\n

例如

\n

index.tsx：

\n

import { Child1 } from './child1';\nimport { Child2 } from './child2';\n\nimport React from 'react';\n\nexport default function App() {\n  return (\n    <>\n      <Child1 />\n      <Child2 />\n    </>\n  );\n}\n

\n

child1.tsx：

\n

import React from 'react';\n\nexport function Child1() {\n  return <div>child1</div>;\n}\n

\n

child2.tsx：

\n

import React from 'react';\n\nexport function Child2() {\n  return <div>child2</div>;\n}\n

\n

index.test.tsx：

\n

import { render } from '@testing-library/react';\nimport React from 'react';\nimport App from './';\n\njest.mock('./child1', () => ({ Child1: () => 'mocked child1' }));\njest.mock('./child2', () => ({ Child2: () => 'mocked child2' }));\n\ndescribe('67636326', () => {\n  it('should pass', () => {\n    const { container } = render(<App />);\n    expect(container).toMatchInlineSnapshot(`\n      <div>\n        mocked child1\n        mocked child2\n      </div>\n    `);\n  });\n});\n

\n

测试结果：

\n

 PASS  examples/67636326/index.test.tsx (8.339 s)\n  67636326\n    \xe2\x9c\x93 should pass (25 ms)\n\n \xe2\x80\xba 1 snapshot written.\nSnapshot Summary\n \xe2\x80\xba 1 snapshot written from 1 test suite.\n\nTest Suites: 1 passed, 1 total\nTests:       1 passed, 1 total\nSnapshots:   1 written, 1 total\nTime:        9.454 s\n

\n