Node.jsでJasmineを使ってReactアプリをテストする
Jasmine NPMパッケージは、元々はNode.jsコードに対してスペックを実行するためだけに設計されましたが、他のいくつかのパッケージを使用することで、Reactのスペックも実行できます。このチュートリアルでは、コードのコンパイルにbabelを、テストにReact Testing Libraryを使用することを前提としています。また、スペック用の偽のHTML DOMを提供するためにjsdomも使用します。
この設定の完全な動作例も用意されています。
使用するパッケージ管理ツールを選択してください
基本設定
まだインストールしていない場合は、これらのパッケージをインストールしてください
$ yarn add --dev @babel/core \
@babel/register \
babel-preset-react-app \
cross-env \
jsdom \
jasmine
$ npm install --save-dev @babel/core \
@babel/register \
babel-preset-react-app \
cross-env \
jsdom \
jasmine
次に、Jasmineを初期化します
$ yarn run jasmine init
$ npx jasmine init
このコマンドは、spec/support/jasmine.json
を作成し、初期のデフォルト設定を投入します。Jasmineを初期化したら、まず、babelをrequire
チェーンに登録するヘルパーを作成します。これにより、TypeScriptファイルがロードされると、その場でJavaScriptにコンパイルされるようになります。spec/helpers
ディレクトリにbabel.js
という名前の新しいファイルを作成します。
require('@babel/register');
または、TypeScriptを使用している場合
require('@babel/register')({
"extensions": [".js", ".jsx", ".ts", ".tsx"]
});
次の内容でBabel設定を追加することにより、必要なJavaScriptのフレーバーをBabelに伝える必要があります。
{
"presets": ["react-app"]
}
次に、シミュレートされたブラウザ環境を提供する必要があります。spec/helpers
にjsdom.js
を次の内容で作成します。
import {JSDOM} from 'jsdom';
const dom = new JSDOM('<html><body></body></html>');
global.document = dom.window.document;
global.window = dom.window;
global.navigator = dom.window.navigator;
これらのファイルがスペックの実行前にロードされるようにするために、spec/support/jasmine.json
を編集します。TypeScript、JSX、またはトランスパイルする必要があるその他のコードを含むヘルパーよりも前にBabelヘルパーがロードされる必要があるため、jasmine.json
を次のように変更します。
"helpers": [
"helpers/babel.js",
"helpers/**/*.js"
],
または、TypeScriptを使用している場合
"helpers": [
"helpers/babel.js",
"helpers/**/*.{js,ts}"
],
次に、package.json
のtest
スクリプトを設定して、Jasmineを実行します
"scripts": {
"test": "cross-env NODE_ENV=test jasmine",
CSSと画像のインポートの処理
ReactコードでCSSまたは画像ファイルをインポートするのは一般的です。通常、これらのインポートはビルド時に解決されますが、Nodeでスペックを実行するとエラーが発生します。これを修正するには、もう1つパッケージを追加します
$ yarn add --dev ignore-styles
$ npm install --save-dev ignore-styles
次のコードをspec/helpers/exclude.js
に記述します。
import 'ignore-styles';
オプション: スペックファイルパターン設定
Jasmineがスペックファイルを探す方法を変更することもできます。Jasmineは伝統的に、spec
ディレクトリにある、名前が.spec.js
で終わるファイルを探しますが、Reactプロジェクトでの一般的な慣例では、スペックファイルをテスト対象のコードと同じディレクトリに置き、名前を.test.js
で終わるようにします。この慣例に従う場合は、spec/support/jasmine.json
のspec_dir
、spec_files
、およびhelpers
の設定を適宜変更します。
"spec_dir": "src",
"spec_files": [
"**/*.test.*"
],
"helpers": [
"../spec/helpers/babel.js",
"../spec/helpers/**/*.js"
],
または、TypeScriptの場合
"spec_dir": "src",
"spec_files": [
"**/*.test.*"
],
"helpers": [
"../spec/helpers/babel.js",
"../spec/helpers/**/*.{js,ts}"
],
Reactテストユーティリティの設定
Reactコンポーネントをレンダリングし、結果を検査する方法が必要です。その機能を提供するユーティリティライブラリはいくつかあります。最も人気のあるものはReact Testing Libraryです。
react-testing-libraryの設定は簡単です。@testing-library/react
パッケージがインストールされていることを確認するだけです。create-react-app
の最近のバージョンを使用してアプリケーションを初期化した場合、すでにある可能性があります。ない場合はインストールします
$ yarn add --dev @testing-library/react
$ npm install --save-dev @testing-library/react
詳細については、React Testing Libraryのドキュメントを参照してください。関連するjasmine-domマッチャーライブラリも興味深いかもしれません。
React Testing LibraryのドキュメントのほとんどはJest向けに書かれているため、コードサンプルはJasmineで動作するように変換する必要があります。特に
test()
のJasmineでの同等のものはit()
です。- 重複する部分は多いですが、JestとJasmineには異なる組み込みマッチャーがあります。
- Jestは各ファイルに暗黙的なトップレベルのスイートを作成します。Jasmineは作成しないため、各ファイルの内容を名前付きの
describe
でラップすることを強くお勧めします。
JestからJasmineにコードサンプルを変換するときは、Jasmineチュートリアル、Jasmineに付属のマッチャーのリスト、およびjasmine-domに付属のマッチャーのリストを参照すると役立つ場合があります。
まとめ
これで設定は完了です。スペックを記述し、実行します
$ yarn test
$ npm test