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

问题描述

我正在尝试使用 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组件（及其导入语句），测试运行得非常好。

我有两个想法：

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

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

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

标签： reactjsjestjsenzyme

检查此链接。

模拟节点模块

如果您要模拟的模块是 Node 模块（例如：lodash），则模拟应放置在与 node_modules 相邻的模拟目录中（除非您将根配置为指向项目根以外的文件夹）并且将自动模拟。无需显式调用 jest.mock('module_name')。

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

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

问题描述

解决方案

推荐阅读