如何用 jest 模拟 __mocks__ 目录中的 React 组件？答案

【问题标题】：How to mock a React Component in the __mocks__ directory with jest?如何用 jest 模拟 __mocks__ 目录中的 React 组件？
【发布时间】：2020-11-06 15:24:43
【问题描述】：

我一直在尝试将一个常见的模拟组件提取到 mocks 文件夹中，但没有成功。我只能使用常规的 JS 文件，但不能使用组件。

如果我有这样的模块 getList：

    export const getBigger = (a, b) => {
       return a >= b ? a : b;
    };

我可以在我的组件中使用它：

export default function App() {
  const bigger = getBigger("a", "b");
  return (
    <div className="App">
      <Bigger bigger={bigger} />
    </div>
  );
}

我可以把纯js函数放到mocks文件夹中

export const getBigger = jest.fn((p1, p2) => false);

而且我可以毫无问题地将它导入到我的测试中：

import { getBigger as mockedGetBigger } from '../utils';
jest.mock('../utils');

然后做我的断言：

expect(mockedGetBigger).toHaveBeenCalledTimes(1);
expect(mockedGetBigger).toHaveBeenCalledWith('a', 'b');

但如果我想模拟更大的组件，我不能这样做，它只能这样工作：

jest.mock('../Bigger', () => ({
   Bigger: jest.fn(() => <>Mocked Bigger Component</>),
}));

但是，如果我将函数提取到 mocks 文件夹并尝试将其用作简单的 js 函数，则会出现错误：

import React from 'react';
export const Bigger = jest.fn(() => <>Mocked Bigger Image</>);

并在测试中将其导入并用作：

import { Bigger as MockedBigger } from '../Bigger';
jest.mock('../Bigger');

我收到以下错误：

Error: Uncaught [Error: Bigger(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.]

我不确定 jest 在同一步骤中导入和模拟或在 mocks 文件夹中查找模拟函数时有什么区别。

有什么想法吗？其他人在这里抱怨它：https://github.com/facebook/jest/issues/6935

我做了一个简单的代码框来帮助理解问题：https://codesandbox.io/s/mocks-folder-example-oxht3?file=/src/index.js

这里是 jest 的指南，将你的模拟放在 __mocks__ 文件夹中

【问题讨论】：

标签： reactjs mocking jestjs

【解决方案1】：

最后，我发现了。

我创建了一个 CodeSandbox，但碰巧，jest.mock() 在 CodeSandbox 中尚不可用...

无论如何，我的问题是我没有为__mocks__ 文件夹中的真实文件及其对应文件使用相同的扩展名。

有史以来最愚蠢的错误！

【讨论】：