さまざまな Jest テストで使用しているユーティリティ関数がいくつかあります。たとえば、フェッチ応答をモックするための次のような関数です。
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プロジェクトで使用する他のユーティリティ関数と一緒にフォルダー内に配置する必要がありますか? その場合、これらの関数に対してもユニット テストを作成する必要がありますか?
ベストアンサー1
モジュールを明示的にインポートする必要なく、ヘルパーをグローバル関数として公開する機能があります。
- Jestでは、実行されるすべてのテストファイルの前に実行されるファイルを設定することができます。
setupFiles設定オプション - また、Jestは
global変更可能なオブジェクトであり、そこに配置したすべてのものがテストで利用できるようになります。
例
パッケージ.json:
"jest": {
"setupFiles": ["helpers.js"]
}
ヘルパー.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'。宣言ファイルを追加することでこれを修正できます。
ヘルパー.d.ts:
declare function mockFetchJsonResponse(data: any): any;
新しいtsconfig.test.jsonファイルを作成し、そのファイルをfilesセクションに追加して、メインの tsconfig を拡張します。
{
"extends": "./tsconfig.json",
"files": ["./.jest/helpers.d.ts"]
}
ファイルに、 jest が新しい tsconfig ファイルを使用するようにするjest.config.jsための新しいグローバル設定を追加します。ts-jest
// ...
globals: {
"ts-jest": {
tsconfig: "tsconfig.test.json"
}
}
// ...
確かに、「ファイルをどこに保存するか」という直接的な質問に答えているわけではありませんが、それはあなた次第です。setupFilesセクションでそれらのファイルを指定するだけです。テストでは必要がないので、importあまり重要ではありません。
テスト ヘルパーのテストについてはよくわかりません。スペック ファイル自体と同様に、テスト インフラストラクチャの一部です。テストのためにテストを書くことはしません。そうしないと、テストが止まらなくなってしまいます。もちろん、それはあなた次第です。たとえば、背後にあるロジックが非常に複雑で理解しにくい場合などです。しかし、ヘルパーが複雑すぎるロジックを提供すると、テスト自体が理解できなくなると思いますが、同意しますか?
素晴らしいですねintl によるコンポーネントのテストに関する記事これまで冗談で扱ったことはありませんglobals。