テスト
JESTとは
JavaScript、特にReactのテスト駆動開発をするためのテストフレームワーク。
以下の3つのメソッドを使ってテストケースを作成する。
- describe関数
複数のテストケースをテストスイートとしてまとめる - it関数
テストケースを定義する - expect関数
it関数の中で、実行結果が期待していたものかどうか確認する
JESTの使い方
- インストール
yarn add jest --dev - __test__ディレクトリ作成
mkdir src/__tests__
Jestはプロジェクトのルートディレクトリ以下にある__test__ディレクトリを自動的に検出してテストを実行する。 - テスト用ファイル作成
touch src/__tests__/xxx.test.js
拡張子は.test.jsとするのが慣例。describe('test1', () => {
it('test1-1', () => {
expect(1 + 1).toBe(2);
});}); - テスト実行
npx jest
（またはpackage.jsonのscriptに”test”: “jest”を追加してyarn testとする）
Enzyme
Reactのテストはコンポーネントをマウントさせる必要があるため、Jest単体では行うことができない。EnzymeというReactの仮想レンダラーを使うのが一般的。
EnzymeはReactのバージョンに合わせたアダプタが必要である。
- インストール
yarn add enzyme enzyme-adapter-react-16 --dev
※私の環境ではエラーになったのでyarn upgradeを行ったところ成功した
(https://qiita.com/akameco/items/301aff5f30d673c6ab17) - babel-jestのインストール
yarn add babel-jest --dev
ES6で記述されたコンポーネントをJestでテストするのに必要。 - .babelrcの作成
touch .babelrc
中身は以下。{
"@babel/preset-env", "@babel/preset-react"} - テストケースを以下のように定義する
import React from 'react';
import { configure, shallow } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import MyInput from '../my_input.js'
configure({ adapter: new Adapter() });
describe('test1', ()=> {
const myInput = shallow(<MyInput/>);
it('test1-1', () => {
myInput.find('input').simulate('change', {target: {value: 100}});
expect(myInput.state('num')).toBe(100);
});
});- shallow関数
コンポーネントを読み込む。 - コンポーネント.find()
要素の取得 - コンポーネント.simulate()
要素の操作 - コンポーネント.state()
ステートの取得
以下、テストに使ったコンポーネント
import React from "react";
export default class MyInput extends React.Component {
constructor() {
super();
this.state = {
num: 0,
};
this.handleNumChange = this.handleNumChange.bind(this);
}
handleNumChange(e) {
this.setState({num: e.target.value});
}
render() {
return (
<p>
<input type="text" onChange={this.handleNumChange} />{this.state.num}
</p>
)
}
}- テスト実行
npx jest
fetch API
fetch APIとは
XMLHttpRequestに代わる新しいWebブラウザ標準API。
IEやiOS safari10.2以下(iPhone7以下)は非対応なので、対応させる場合はポリフィルが必要。yarn add isomorphic-fetch --devでインストール。import fetch from 'isomorphic-unfetch'でインポート。
※babel7.4以降では、core-js@3と@babel/preset-envをインストールして以下のようにプリセットを指定するだけでよい。
（https://aloerina01.github.io/blog/2019-06-21-1）
presets: [
["@babel/preset-env", {
useBuiltIns: "usage",
corejs: 3
}]
]fetch APIの使い方
fetch("https://www.reddit.com/r/newsokur/.json")
.then(response => response.json())
.then(json => {
let items = json.data.children.map(item => {
return item.data;
});
this.setState({items: items});
});以下のように書くことも可能。
fetch("https://www.reddit.com/r/newsokur/.json")
.then(response => {
response.json().then((json) => {
// 処理
})
});
コメント