使用 Jest + Enzyme 在 React 组件中导入的模拟节点模块

Question

我正在尝试使用 Jest 和 Enzyme 测试 React 组件，但我的测试无法运行，因为它似乎在使用特定节点模块时遇到了问题。破坏测试的模块实际上是从我要测试的模块内部的一个组件中导入的。

这是层次结构：

• 见解
  • BuildOnScrollHelper（这是导入节点模块的地方）。

当我运行这个测试时：

import React from 'react';
import { shallow } from 'enzyme';
import { View } from 'react-native';
import { Insights } from '../../containers/Insights';
import insightsMockData from '../../mocks/data/insights';

describe('Insights Container', () => {
  let cmp;

  beforeEach(() => {
    cmp = shallow(
      <Insights
        {...insightsMockData}
        loadReports={jest.fn()}
        fetchGraph={jest.fn()}
      />,
    );
  });

  it('does stuff', () => {
    console.log(cmp.debug());
  });
});

我在控制台中从 Jest 收到此错误：

如果我进入我的 Insights React 组件并注释掉 BuildOnScrollHelper 组件（及其导入语句），测试运行良好。

我有两个想法：

1. 我什至不需要模拟节点模块，也许我可以模拟 BuildOnScrollHelper 本身？对于这个测试，我根本不关心 BuildOnScrollHelpers 功能。
2. 我将不得不模拟节点模块。

有谁知道我会如何以一种被认为是良好做法的方式来解决这个问题？我花了几个小时试图寻找解决方案，但仍然无法让我的测试正常工作。

理想情况下，我想要一个提供一些代码示例的答案，而不仅仅是一个文档的链接。

Answer 1

检查此link。

模拟节点模块

如果您要模拟的模块是 Node 模块（例如：lodash），则 mock 应该放在 mocks 目录下 node_modules（除非您将根配置为指向其他文件夹 比项目根目录）并且将被自动模拟。没有 需要显式调用 jest.mock('module_name')。

可以通过在目录中创建文件来模拟作用域模块 与作用域模块的名称匹配的结构。例如，要 模拟一个名为 @scope/project-name 的作用域模块，在 模拟/@scope/project-name.js，相应地创建@scope/目录。