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で動作するように変換する必要があります。特に

JestからJasmineにコードサンプルを変換するときは、Jasmineチュートリアル、Jasmineに付属のマッチャーのリスト、およびjasmine-domに付属のマッチャーのリストを参照すると役立つ場合があります。

まとめ

これで設定は完了です。スペックを記述し、実行します

$ yarn test

$ npm test