フロントエンド開発の自動化を次のレベルへ：React、Redux、Jest、CI/CDパイプラインを組み合わせた強力なソリューション
React、Redux、JestにおけるCRA Jestの非対話モード実行
React、Redux、Jestを使用した開発において、CI/CDパイプラインでテストを自動実行する場合、対話モードでJestを実行してしまうと、パイプラインが停止してしまうことがあります。これを回避するために、Jestを非対話モードで実行する方法をご紹介します。
非対話モードとは
非対話モードとは、ユーザーからの入力を必要とせずにコマンドを実行するモードです。Jestの場合、対話モードではテストの実行前にどのテストを実行するかを選択する画面が表示されますが、非対話モードでは選択画面が表示されず、設定に従って自動的にテストが実行されます。
非対話モードで実行する利点
- 人為的なミスを防ぐことができる
- テスト実行にかかる時間を短縮できる
- CI/CDパイプラインでの自動実行に適している
Jestを非対話モードで実行するには、以下のいずれかの方法で行うことができます。
環境変数を設定する
以下のコマンドを実行して、CI環境変数をtrueに設定します。
export CI=true
この方法で設定した環境変数は、現在のターミナルセッションのみ有効です。
--ciオプションを使用する
Jestコマンドに--ciオプションを指定して実行します。
npx jest --ci
このオプションは、コマンドを実行するたびにCI環境変数をtrueに設定します。
構成ファイルを使用する
Jestの構成ファイル（jest.config.js）で、ciプロパティをtrueに設定します。
module.exports = {
preset: 'react-app',
ci: true,
};
この設定は、Jestコマンドを実行するたびに適用されます。
Reduxでの非対話モード実行
Reduxを使用している場合は、JestのテストでReduxストアの状態をモックする必要があります。これには、redux-mock-storeなどのライブラリを使用することができます。
例
const configureStore = require('redux-mock-store');
const mockStore = configureStore({
initialState: {
// 初期ステート
},
});
test('テストコード', () => {
const store = mockStore();
// テストロジック
});
Jestでの非対話モード実行に関する注意点
- テストの実行前に、構成ファイルをよく確認してください。
- 非対話モードでは、対話モードで利用できる一部の機能が利用できない場合があります。
export CI=true
npx jest
npx jest --ci
// jest.config.js
module.exports = {
preset: 'react-app',
ci: true,
};
// App.test.js
import React from 'react';
import { render } from '@testing-library/react';
import App from './App';
test('レンダリングテスト', () => {
const { getByText } = render(<App />);
expect(getByText('Hello, world!')).toBeInTheDocument();
});
// App.test.js
import React from 'react';
import { render } from '@testing-library/react';
import App from './App';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import rootReducer from './reducers';
const store = createStore(rootReducer);
test('Reduxテスト', () => {
const { getByText } = render(
<Provider store={store}>
<App />
</Provider>
);
expect(getByText('Hello, world!')).toBeInTheDocument();
});
注意事項
- 上記のコードはあくまで一例であり、ご自身の環境に合わせて変更する必要があります。
package.jsonファイルのscriptsプロパティに、Jestを非対話モードで実行するスクリプトを追加することができます。
{
"scripts": {
"test": "npx jest --ci"
}
}
このスクリプトを実行するには、以下のコマンドを実行します。
npm run test
GitLab CI/CDを使用する
GitLab CI/CDを使用している場合は、パイプラインでJestを非対話モードで実行するように設定することができます。
image: node:latest
stages:
- test
test:
stage: test
script:
- npm install
- npm run test
Travis CIを使用する
language: node_js
script:
- npm install
- npm run test
CircleCIを使用する
version: 2.1
jobs:
test:
docker:
- image: circleci/node:latest
steps:
- checkout
- restore_cache:
keys:
- dependency-cache-${CIRCLE_SHA1}
- run:
name: Install dependencies
command: npm install
- save_cache:
paths:
- node_modules
key: dependency-cache-${CIRCLE_SHA1}
- run:
name: Run tests
command: npm run test
reactjs redux jestjs
