使用 Jest 进行测试的共享工具函数

IT技术 javascript reactjs jestjs
2021-05-22 06:40:19

我在各种 Jest 测试中使用了一些 utils 函数，例如这样的函数，用于模拟 fetch 响应：

export const mockFetchJsonResponse = (data) => {
    ok: () => true,
    json: () => data
};

我想以一种可以导入它们并在我的测试中重用的方式共享这些函数。例如：

// Some .spec.jsx file
// ...
import {mockFetchJsonResponse} from 'some/path/to/shared/tests/utils.jsx'

// Then I can use mockFetchJsonResponse inside this test
// ...

我应该在哪里放置这些常见的实用程序功能？

我的项目文件夹如下所示：

components/
    CompOne/
        __tests__
        index.jsx
    CompTwo/
        __tests__
        ...
utils/
    __tests__
    http.js
    user.js
    ...

我应该将它们utils与我用于项目的其他 utils 函数一起放在文件夹中吗？那么我是否也应该为这些函数编写单元测试？

3个回答

可以将 helper 公开为全局函数，而无需显式导入module。

  1. Jest 允许配置一些文件将在通过setupFiles配置选项执行的每个测试文件之前运行
  2. 此外，Jest 提供global了您可以修改的对象，您放置的所有内容都将在您的测试中可用。

例子

包.json：

"jest": {
    "setupFiles": ["helpers.js"]
}

helpers.js：

global.mockFetchJsonResponse = (data) => {
    ok: () => true,
    json: () => data
};

somecomponent.test.js:

mockFetchJsonResponse(); // look mom, I can call this like say expect()!

使用typescript

TypeScript 会抱怨cannot find name 'mockFetchJsonResponse'. 您可以通过添加声明文件来解决这个问题：

helpers.d.ts：

declare function mockFetchJsonResponse(data: any): any;

创建一个新tsconfig.test.json文件并将该文件添加到该files部分并扩展您的主要 tsconfig：

{
    "extends": "./tsconfig.json",
    "files": ["./.jest/helpers.d.ts"]
}

在您的jest.config.js文件中，添加一个新的全局设置，ts-jest让 jest 使用您的新 tsconfig 文件：

// ...
globals: {
    "ts-jest": {
         tsconfig: "tsconfig.test.json"
    }
}
// ...

当然，它不会直接回答您“将文件放在哪里”的问题，但这取决于您。您只需要在setupFiles部分中指定这些文件。由于import在测试中不需要它并不重要。

至于测试测试助手，我不确定。看看它是测试基础设施的一部分，比如规范文件本身。我们不会为测试编写测试，否则它永远不会停止。当然，这取决于您 - 假设背后的逻辑是否真的非常复杂且难以遵循。但是如果 helper 提供了过于复杂/复杂的逻辑，它会导致测试本身无法理解，你同意吗？

感谢那篇关于使用 intl 测试组件的文章。以前从来没有globals开玩笑。

另一种方法是拥有一个测试目录并在其上移动助手。

src/
  components/
  utils/
  ...
test/
  testHelpers.js

然后在测试中：

// src/components/MyComponent.spec.js
import { helperFn } from '../../test/testHelpers';

好处：

  • 明确函数的来源
  • 将需要测试的助手与不需要测试的助手分开 ¹

缺点：

  • 该test目录可能看起来很傻，因为它只包含一个帮助文件
  • AFAIK 官方文档中没有指定这种方法

看起来GitLab 正在他们的 RoR 项目中实施这种方法。

¹无论您采用哪种方法，请不要测试测试助手。如果助手失败，那么您的测试也必须失败。否则你的助手根本没有帮助。

TL; 博士; 创建/__utils__/并更新testPathIgnorePatterns

完整答案：

这里只是一个建议：

testPathIgnorePatterns: ['/__fixtures__/', '/__utils__/'],

我/__tests__/用于测试，有时我需要在其中添加一个包含这些测试将使用的数据的文件夹，所以我使用/__fixtures__/folder.

同样，当我有跨测试的共享逻辑时，我将它们放在/__utils__/文件夹中（也在 内/__tests__/）

有关更多详细信息，请阅读有关testPathIgnorePatterns 的更多信息

其它你可能感兴趣的问题
上一篇Monoprice Select Mini - 分离式长丝进料器配件 下一篇如何在 Marlin 上设置 G 代码缓冲区大小？