はじめに
今回の目的はいろんなテストツールを実際に書いて学習していこう！というものです。
簡単なコードですが、同じコードをそれぞれの記法で書きながら比較していこうとうものです。
基本の「き」しかかいていないので公式のリファレンスをゴリゴリ読むことをおすすめします。
対象テストツールのご紹介
こちらのdeveloper-roadmapや いろんなライブラリーを調べながら進めていきたいと思います。
1 Jest
2 Jasmine
3 Mocha
テスト対象
今回expressを用いて、簡単な認証システムを作成しました。
実際にLoginとLogoutについて書いてみました。
今回はRouterオブジェクトのテストをやりやすくるためにsupertestというモジュールをインストールしています。
https://github.com/visionmedia/supertest
Jest
導入
$ npm install --save-dev jest
コード
const request = require('supertest');
const app = require('../app');
describe('/login', () => {
test('it returns status code is 200', (done) => {
request(app).get('/login').then((response) => {
expect(response.statusCode).toBe(200);
done();
});
});
test("it returns Content-Type is 'text/html'", (done) => {
request(app).get('/login').then((response) => {
expect(response.headers["content-type"]).toBe('text/html; charset=utf-8');
done();
});
});
});
const request = require('supertest');
const app = require('../app');
describe('logout', () => {
test('it returns status code is 302', (done) => {
request(app).get('/logout').then((response) => {
expect(response.statusCode).toBe(302)
done();
});
});
test('it redirects root path', (done) => {
request(app).get('/logout').then((response) => {
expect(response.headers['location']).toBe('/')
done();
});
});
});
実行結果
①
②
所感
標準設定でこれらの情報を表示してくれるのは親切だなと思ってしまいました。
またに --watchというような watchオプションをつけると監視モードに入ってくれるので、テストを変更した際に自動で走るようになってくれます。(①)他にも --covarageといったcovarageオプションをつける下記のようなグラフ上で結果を表示してくれます！(②)
Mactherも直感的でわかりやすかったです！
Jasmine
導入
$ npm install --save-dev jasmine
コード
const request = require('supertest');
const app = require('../app');
describe('/login', () => {
it('returns status code is 200', (done) => {
request(app)
.get('/login')
.end((err, res) => {
try {
expect(err).toBeNull()
expect(res.status).toEqual(200)
done();
} catch (err) {
done.fail(err);
}
});
});
it('responses content-type is 'text/html'', (done) => {
request(app)
.get('/login')
.end((err, res) => {
try {
expect(err).toBeNull()
expect(res.status).toEqual(200)
expect(res.headers['content-type']).toEqual('text/html; charset=utf-8')
done();
} catch (err) {
done.fail(err);
}
});
});
});
const request = require('supertest');
const app = require('../app');
describe('/logout', () => {
it('returns status code is 302', (done) => {
request(app)
.get('/logout')
.end((err, res) => {
try {
expect(err).toBeNull()
expect(res.status).toEqual(302)
done();
} catch (err) {
done.fail(err);
};
});
});
it('redirects root path', (done) => {
request(app)
.get('/logout')
.end((err, res) => {
try {
expect(err).toBeNull()
expect(res.headers['location']).toEqual('/')
done();
} catch (err) {
done.fail(err);
};
});
});
});
実行結果
所感
いろんな記事にも書かれていたのですが、Ruby/RailsでRSpecを使ってテストを書く習慣がベースとしてあって、RSpecと似たような記法のJasmineは違和感がないというのは実際に感じました。
Matcherも似たような感じなので、イメージでできてしまいます。(実際にはちゃんと調べましょう！)
Angularで使われることが多々あるようですね！
Mocha
導入
$ npm install --save-dev mocha
コード
const request = require('supertest');
const app = require('../app');
describe('/login', () => {
it ('return status code is 200', (done) => {
request(app)
.get('/login')
.expect(200, done);
});
it ('returns Content-Type is text/html; charset=utf-8', (done) => {
request(app)
.get('/login')
.expect('Content-Type', 'text/html; charset=utf-8', done);
});
});
describe('/logout', (done) => {
it('returns status code is 302', (done) => {
request(app)
.get('/logout')
.expect(302, done);
});
it('redirect root page', (done) => {
request(app)
.get('/logout')
.expect('Location', '/', done);
});
});
実行結果
所感
今回はmochaというよりも、supertest風な書き方になってしまいました....
ですが期待する値と結果を引数で書くやり方はこれまでと一線を画しています。
またGithub上で調べてみると、比較的古めのプロダクトはmochaで書かれている印象を持ちました。
いろんなOSSを参考にしながら、構成を考えたり、リーディングできたりすることはとても魅力的ですね！
まとめ
どんなアプリケーションでも必ずテストは書くかと思います。
実際３つのテストツールを書いてみて感じたことはJestは使いやすいというか、defaultでいろんなことができるなーという印象を持ちました。
また、ReactやVueなどにもしっかり対応しています。Vue jsの Vue Test Utilsでは Jest は最も充実したテストランナですとまで言っていますw
それほど、多くのエンジニアから認められていることを裏付けるかのようです。
今回のこのアドベントカレンダーのおかげさまで、一度に３つのテストツールに触れることができました。簡単なコードではありましたが、沢山リファレンスを読むことができたのでとても勉強になりました！みなさんも個人、会社用のQiita、または会社のブログ、年一回のアドベントカレンダーなどの機会を上手に使いながら学習していきましょう！