Question

我有一个测试文件来测试React组件。

React组件使用一些辅助函数来计算一些东西，例如输入客户的生日，并根据其年龄是否在一定范围内返回数字。

在测试文件中，我传入了这些值，以便今天通过测试，但是我需要对其进行模拟以便始终通过。

我知道我需要模拟正在组件中导入的辅助函数，但是我无法弄清楚。

一个组件代码示例是

import { ageFunc } from './mydir/helper/ageFunc';

然后将其与传递到组件中的一些道具一起使用：

const ageRange value = ageFunc(customerPropValues);

然后，这个ageRange值决定是否渲染某些东西。

在测试文件中，我传递了有效的客户生日日期值，以触发我期望的渲染行为。如何通过模拟设置？

Answer 1

我不确定我是否完全理解它，但是如果您需要模拟它以便使其始终有效，则应模拟实现以使其始终返回同一内容。您可以找到有关模拟自定义函数here的很多信息。

// Mock before importing
jest.mock('./mydir/helper/ageFunc', () => ({
  __esModule: true,
  default: () => 'Default',
  ageFunc : () => 'hardcoded result',
}));
import { ageFunc } from './mydir/helper/ageFunc';

const ageRange = ageFunc(customerPropValues); // ageRange returns 'Hardcode result'

如果不是这种情况，则只需要检查是否传递了正确的参数或是否接收到正确的结果，您可以执行以下操作：

// The mock function was called at least once
expect(ageFunc).toHaveBeenCalled();

// The mock function was called at least once with the specified arguments
expect(ageFunc).toHaveBeenCalledWith(arg1, arg2);

// The last call to the mock function was called with the specified arguments
expect(ageFunc).toHaveBeenLastCalledWith(arg1, arg2);

// All calls and the name of the mock is written as a snapshot
expect(ageFunc).toMatchSnapshot();

有用的链接：link #1 link #2

它如何工作？

让我们从一个默认模块的简单示例开始：

import a from './path'

我们模拟的方式是：

jest.mock('./path')
import a from './path'

此测试文件会将模拟的函数读取到a变量中。

现在，根据您的情况，您已经有了一个已命名的导出文件，因此该案要复杂一些。

import { a } from './path'

要对此进行模拟，我们必须稍微扩展jest.mock。

jest.mock('./path', () => ({
      __esModule: true, // Settings to make it behave as an ECMAScript module
      default: () => 'Default', // Mock the default export (import a from './dir')
      a: () => 'hardcoded result', // Mock the named export (import { a } from './dir'
    }));

难以理解嘲笑的玩笑功能

1 个答案: