使用 Jest 进行测试的共享工具函数 [英] Shared utils functions for testing with Jest

问题描述

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

I have some utils functions that I'm using among various Jest tests, for example a function like this, for mocking a fetch response:

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

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

I would like to share those functions in a way that I can import them and reuse among my tests. For example:

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

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

我应该把这些常用的utils函数放在哪里?

Where should I place such common utils functions?

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

My project folder looks like this:

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

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

Should I place them inside the utils folder together with other utils functions that I use for my project? Then should I write unit tests also for these functions?

推荐答案

可以将帮助程序公开为全局函数，而无需显式导入模块.

There is an ability to expose helpers as global functions without any need to import modules explicitly.

1. Jest 允许在通过 setupFiles 配置选项
2. 还 Jest 提供了 global 对象，您可以修改，您放置在那里的所有内容都将在您的测试中可用.

示例

package.json:

Example

package.json:

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

helpers.js:

helpers.js:

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

somecomponent.test.js:

somecomponent.test.js:

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

使用打字稿

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

With TypeScript

TypeScript will complain with cannot find name 'mockFetchJsonResponse'. You can fix that by adding a declaration file:

helpers.d.ts:

helpers.d.ts:

declare function mockFetchJsonResponse(data: any): any;

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

Create a new tsconfig.test.json file and add that file to the files section and extend your main tsconfig:

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

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

In your jest.config.js file, add a new global setup for ts-jest to have jest use your new tsconfig file:

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

---

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

---

Sure it does not answer you direct question "where to put the files" but it's anyway up to you. You just need specify those files in setupFiles section. Since there is no import needed in tests it does not really matter.

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

As for testing test helpers I'm not sure. See it's part of testing infrastructure like spec file itself. And we don't write tests for tests or it would never stop. Sure, it's up to you - say if logic behind is really-really complex and hard to follow. But if helper provides too complex/complicated logic it would lead to tests themselves be impossible to understand, do you agree?

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

kudos to that article on testing compoentns with intl. Have never dealt with globals in jest before.

这篇关于使用 Jest 进行测试的共享工具函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！