テストの種類
javascriptでテストを行うとき、テストの種類は大きく分けて2つに分かれます。
「単体テスト」と「結合テスト」です。
単体テストとは
「単体テスト」とはメソッドや関数、モジュールなどの小さい単位を対象にして、その中身の構造やデータの受け渡しが意図した通りになっているかを検証するテスト。
※javascriptのコードチェックを行う。
結合テストとは
「結合テスト」とはそれぞれのモジュールを組み合わせて一連の流れを検証するテスト。「シナリオテスト」とも言われます。
※ブラウザを立ち上げてQAテスト項目を確認する
単体テストのツール
単体テストを行うときに使う主なツールはこちら
- QUnit
- Jasmine
- Mocha
- Jest
このなかで最新のテストツールが「Jest」になります。
また「Jest」は「React」を用いたアプリケーションのテストも行えるので、今後「単体テスト」を行うなら「Jest」導入を推します。
###「Jasmine」「Mocha」「Jest」のテストコードの基本的な書き方は似ています。
テストコード
describe('', () => {
beforeAll(() => {
// 一回だけ呼ばれる事前処理
});
afterAll(() => {
// 一回だけ呼ばれる事後処理
});
beforeEach(() => {
// itごとに毎回呼ばれる事前処理
});
afterEach(() => {
// itごとに毎回呼ばれる事後処理
});
it('', () => {
// テストの内容
});
it('', () => {
// テストの内容
});
});
上記を実行したときの処理の順番
beforeAll
beforeEach
afterEach
beforeEach
afterEach
afterAll
Jestを導入するには
Jestを使うにはnpmインストールする必要があります。
jestをinstall
$ npm init
$ npm i jest -D
$ export PATH=$PATH:./node_modules/.bin // パスを通す
$ jest --version
sum.js
function sum(a, b) {
return a + b;
}
module.exports = sum;
sum.test.js
const sum = require('./sum');
test('引数の値を足したときの値を確認', () => {
expect(sum(1, 2)).toBe(3);
});
※テストコードを書くファイルの拡張子は「test.js」にする必要があります。
テストを実行したときにjestがその拡張子のファイルを探しにいくためです。
package.jsonの中身を書き換え
package.json
"scripts": {
"test": "jest"
}
テスト実行
$ npm test
実行結果
PASS ./sum.test.js
✓ 引数の値の合計をテスト (3ms)
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 0.503s, estimated 1s
Ran all test suites.
結合テストのツール
結合テストを行うときに使う主なツールはこちら
- Zombie.js
- PhantomJS
- Selenium
- TestCafe
このなかで最新のツール(フレームワーク)である「TestCafe」導入を推します。
その理由としては、
- TestCafeでは各ブラウザのWebdriverを設定する必要がない
- Node.jsをインストールしてない環境でもTestCafeでテスト結果を見ることができる。
- ES6でテストコードを記述できる
TestCafe導入するには
TestCafeを使うにはnpmインストールする必要があります。
TestCafeをinstall
$ npm init
$ npm i testcafe -D
$ export PATH=$PATH:./node_modules/.bin // パスを通す
$ testcafe -v
TestCafeのコード例
TestCafeのテストコード
// import 文
// 変数・定数等の宣言
fixture('テスト内容の分類やページのタイトル等')
.page('テストするページのURL');
test('テスト項目名その1', async t => {
// テスト記入
});
test('テスト項目名その2', async t => {
// テスト記入
});
test('テスト項目名その3', async t => {
// テスト記入
});
テスト実行
testcafe chrome ./test.js