Mocha

Transcript

1. Mocha
3. テストツールの話をします
4. Mocha - JavaScriptのユニットテストフレームワーク - node.jsやブラウザから実行できる - IDE（WebStormなど）からも実行できる
5. Mocha 設定もコードも簡単にできます。 chaiやshould.jsなどのアサーションライブラリを使えば、 いろいろな書き方もできますが、今回は話しません。
6. 準備 $ yarn add -D mocha
7. 準備 package.json “scripts”: { “test”: “mocha” }
8. 準備 $ yarn test
9. 簡単な例 var assert = require('assert'); describe('Array', function() { describe('#indexOf()', function() { it('should return -1 when the value is not present', function() { assert.equal([1,2,3].indexOf(4), -1); }); }); });
10. 簡単な例 $ mocha "test/test01.js" Array #indexOf() ✓ should return -1 when the value is not present 1 passing (8ms) ✨ Done in 0.50s.
11. 非同期の例 const assert = require('assert'); function asyncAdd(a, b) { return new Promise((resolve) => { resolve(a+b); }); }; describe('async test', () => { it('Promise', (done) => { let result = 0; asyncAdd(2, 3).then((result) => { assert(result === 9); }).then(done, done); }) });
12. 非同期の例 $ mocha "test/test02.js" async test ✓ Promise 1 passing (12ms) ✨ Done in 0.46s.
13. ブラウザでも動きます
14. ブラウザの例 <html> <head> <meta charset="utf-8"> <title>Mocha Tests</title> <link href="https://cdn.rawgit.com/mochajs/mocha/2.2.5/mocha.css" rel="stylesheet" /> </head> <body> <div id="mocha"></div> <script src="https://cdn.rawgit.com/jquery/jquery/2.1.4/dist/jquery.min.js"></script> <script src="https://cdn.rawgit.com/Automattic/expect.js/0.3.1/index.js"></script> <script src="https://cdn.rawgit.com/mochajs/mocha/2.2.5/mocha.js"></script> <script>mocha.setup('bdd')</script>
15. ブラウザの例
16. テストの結果を 変えることもできます
17. reporter $ yarn test --reporter json
18. reporter $ mocha "test/test01.js" "--reporter" "json" { "stats": { "tests": [ { } ], "pending": [], "failures": [], ・・・ ✨ Done in 0.45s.
19. 独自のreporter 作り方について詳しくはこちら https://github.com/mochajs/mocha/wiki/Third-party-reporters
20. 独自のreporter $ yarn test --reporter ne
21. 独自のreporter
22. おしまい いつか公開します。。。