describe('コンポーネントのテスト', () => {
it('関数実行されているか', () => {
const mockFun = jest.fn()
const wrapper = shallow(
<MyComonent onChange={mockFun}/>
)
wrapper.find('button').simulate('click');
expect(mockFun).toHaveBeenCalled();
})
it('関数2回実行されているか', () => {
const mockFun = jest.fn()
const wrapper = shallow(
<MyComonent onChange={mockFun}/>
)
wrapper.find('button').simulate('click');
wrapper.find('button').simulate('click');
expect(mockFun)toHaveBeenCalledTimes(2)
})
it('Stateが変わっているか', () => {
const wrapper = shallow(
<MyComonent onChange={mockFun}/>
)
wrapper.find('button').simulate('click');
expect(wrapper.state('clicked')).toBe(true)
})
it('イベントオブジェクトをシュミレート', () => {
const myText = 'dummy text'
const wrapper = shallow(
<MyComonent onChange={mockFun}/>
)
wrapper.find('input').simulate('change',{
currentTarget: {
value: myText
}
});
expect(wrapper.state('text')).toBe(myText)
})
it('関数が特定の引数で実行されているか, () => {
const myText = 'dummy text'
const wrapper = shallow(
<MyComonent onChange={mockFun}/>
)
wrapper.find('input').simulate('change',{
currentTarget: {
value: myText
}
});
expect(wrapper).toHaveBeenCalledWith({
text:myText
})
})
})
2018年11月12日
Jest + enzyme でイベントをシュミレート
Jest + enzyme でイベントをシュミレートをする際によく書く記述をまとめてみました。
posted by ねこまんま at 15:31
| test
|

2018年04月12日
JEST入門
簡単なコードを買いてコレをテストしていく。
とりあえずCreateReactAppのものを使うので環境構築はなし。
xxx.jsを作成して
xxx.test.jsとしてテストファイルが作成できるので以下のようにテストコードを書く
`npm test` でテストが実行される
とりあえずCreateReactAppのものを使うので環境構築はなし。
xxx.jsを作成して
export default (a,b) => a + b;
xxx.test.jsとしてテストファイルが作成できるので以下のようにテストコードを書く
import sum from './sum';
test('sum',()=>{
expect(sum(2,3)).toBe(5);
})
`npm test` でテストが実行される
2014年08月27日
jasmine-jqueryとkarmaでの自動テスト
jasmineのfixture(テスト用のHTMLをロードする奴)であるjasmine-jqueryとkarmaを利用しようとする色々とハマったのでメモ。
まず、karmaではconfigのfilesに指定したファイルしか読み込みが出来ない。そこでkarma.conf.jsのfilesにfixturesで読み込むURLを指定しなくてはいけない。オプションでincluded:falseを指定しないと初回で読み込まれてしまうので注意。
また、filesで指定したファイルはbaseディレクトリ配下に読み込まれるので以下のようにKarma経由の場合(ポート番号9876)とブラウザ経由の場合でfixturesPathパスを変更する必要がある。
一番ハマったのは以下のコマンドでインストールした「karma-jasmine」のバージョンが古かったこと。jasmine-jqueryの組み合わせるとclearTimeoutがundefinedとか訳の分からないエラーが出てしまった
以下のコマンドじゃないと2系のkarma-jasmineはインストール出来ない
まず、karmaではconfigのfilesに指定したファイルしか読み込みが出来ない。そこでkarma.conf.jsのfilesにfixturesで読み込むURLを指定しなくてはいけない。オプションでincluded:falseを指定しないと初回で読み込まれてしまうので注意。
module.exports = function(config) {
config.set({
(中略)
files: [
'module/lib/jquery-1.11.1.js',
'module/lib/underscore-min.js',
'module/lib/backbone-min.js',
(中略)
{ pattern: 'fixtures/*.inc', included: false }
],
(中略)
});
}
また、filesで指定したファイルはbaseディレクトリ配下に読み込まれるので以下のようにKarma経由の場合(ポート番号9876)とブラウザ経由の場合でfixturesPathパスを変更する必要がある。
if(location.port==9876){
jasmine.getFixtures().fixturesPath = 'base/fixtures/';
}else{
jasmine.getFixtures().fixturesPath = '../fixtures/';
}
一番ハマったのは以下のコマンドでインストールした「karma-jasmine」のバージョンが古かったこと。jasmine-jqueryの組み合わせるとclearTimeoutがundefinedとか訳の分からないエラーが出てしまった
npm install karma-jasmine --save-dev
以下のコマンドじゃないと2系のkarma-jasmineはインストール出来ない
npm install karma-jasmine@2_0 --save-dev
2014年08月08日
Selenium入門
Seleniumの使い方。
まずはRuby Gemをインストール
test.rbなど適当なファイル名で以下の内容を記述。
以下のコマンドでSeleniumが実行される。
参考:WebのUIテスト自動化 - Seleniumを使ってみる - Qiita
ちょっと上記のスクリプトだと表示が微妙だったが以下のコードのほうが良さげだった。
参考:Ruby - Selenium 入門 - Qiita
まずはRuby Gemをインストール
gem install selenium-webdriver
test.rbなど適当なファイル名で以下の内容を記述。
require "selenium-webdriver"
# Firefox用のドライバを使う
driver = Selenium::WebDriver.for :firefox
# Googleにアクセス
driver.navigate.to "http://google.com"
# `q`というnameを持つ要素を取得
element = driver.find_element(:name, 'q')
# `Hello WebDriver!`という文字を、上記で取得したinput要素に入力
element.send_keys "Hello WebDriver!"
# submitを実行する(つまり検索する)
element.submit
# 表示されたページのタイトルをコンソールに出力
puts driver.title
# テストを終了する(ブラウザを終了させる)
driver.quit
以下のコマンドでSeleniumが実行される。
ruby tesr.rb
参考:WebのUIテスト自動化 - Seleniumを使ってみる - Qiita
ちょっと上記のスクリプトだと表示が微妙だったが以下のコードのほうが良さげだった。
require "selenium-webdriver"
driver = Selenium::WebDriver.for :firefox
driver.get "http://www.google.co.jp/"
driver.find_element(:class,"gsfi").send_key "Selenium"
driver.find_element(:name,"btnK").submit
driver.close
参考:Ruby - Selenium 入門 - Qiita
タグ:Selenium
Karmaでmocha + chaiのテストを自動化
Karma + を利用すればテストが自動化できるので自動化してみました。
ひとまずはkarmaをインストール。
このままでは「-bash: karma: command not found」と怒られてしまうのでkarma-cliもインストール。
これでちゃんとバージョンが表示される。
まずは設定ファイルの作成。対話式で作成できます。
まず、
Which testing framework do you want to use ?
Press tab to list possible options. Enter to move to the next question.
と利用するフレームワークについて聞かれる。QUnitとJasmine、Mochaから選択できるのでひとまずはMochaを選択(tabか下ボタンで候補をきりかえられます)
次に、
Do you want to use Require.js ?
This will add Require.js plugin.
Press tab to list possible options. Enter to move to the next question.
Require.jsを利用するかどうか聞かれます。「no」でEnter
Do you want to capture a browser automatically ?
Press tab to list possible options. Enter empty string to move to the next question.
次に、利用するブラウザを聞かれます。PhantomJSでヘッドレステストなんかもできますがターゲットブラウザ以外でテストするのもあれなのでChromeとFirefoxを選択。(WinならIEとかも指定するとよいかも)
What is the location of your source and test files ?
You can use glob patterns, eg. "js/*.js" or "test/**/*Spec.js".
Enter empty string to move to the next question.
次にスクリプトの場所が聞かれます。"js/*.js" or "test/**/*Spec.js"みたいにして読み込むファイルを指定しましょう。
ちなみにChaiやSinon.JS、jQueryなんかMocha以外にライブラリも指定しておく必要があります。
あと、mocha.run();を実行しているファイルを読み込んじゃうとテストが2回走ってしまいます。ここでハマった。
Should any of the files included by the previous patterns be excluded ?
You can use glob patterns, eg. "**/*.swp".
Enter empty string to move to the next question.
swpファイルの出力場所が聞かれます。これは無視。
Do you want Karma to watch all the files and run the tests on change ?
Press tab to list possible options.
ファイルを監視するか聞かれるので「yes」。
これで「karma.conf.js」が作られます。
と打つと自動でブラウザが立ち上がりテストが開始されます。また、監視ファイルが更新された際にも再テストが自動で行われます。
ひとまずはkarmaをインストール。
npm install -g karma
karma --version
このままでは「-bash: karma: command not found」と怒られてしまうのでkarma-cliもインストール。
npm install -g karma-cli
karma --version
これでちゃんとバージョンが表示される。
Karma version: 0.12.21
まずは設定ファイルの作成。対話式で作成できます。
karma init
まず、
Which testing framework do you want to use ?
Press tab to list possible options. Enter to move to the next question.
と利用するフレームワークについて聞かれる。QUnitとJasmine、Mochaから選択できるのでひとまずはMochaを選択(tabか下ボタンで候補をきりかえられます)
次に、
Do you want to use Require.js ?
This will add Require.js plugin.
Press tab to list possible options. Enter to move to the next question.
Require.jsを利用するかどうか聞かれます。「no」でEnter
Do you want to capture a browser automatically ?
Press tab to list possible options. Enter empty string to move to the next question.
次に、利用するブラウザを聞かれます。PhantomJSでヘッドレステストなんかもできますがターゲットブラウザ以外でテストするのもあれなのでChromeとFirefoxを選択。(WinならIEとかも指定するとよいかも)
What is the location of your source and test files ?
You can use glob patterns, eg. "js/*.js" or "test/**/*Spec.js".
Enter empty string to move to the next question.
次にスクリプトの場所が聞かれます。"js/*.js" or "test/**/*Spec.js"みたいにして読み込むファイルを指定しましょう。
ちなみにChaiやSinon.JS、jQueryなんかMocha以外にライブラリも指定しておく必要があります。
あと、mocha.run();を実行しているファイルを読み込んじゃうとテストが2回走ってしまいます。ここでハマった。
Should any of the files included by the previous patterns be excluded ?
You can use glob patterns, eg. "**/*.swp".
Enter empty string to move to the next question.
swpファイルの出力場所が聞かれます。これは無視。
Do you want Karma to watch all the files and run the tests on change ?
Press tab to list possible options.
ファイルを監視するか聞かれるので「yes」。
これで「karma.conf.js」が作られます。
karma start
と打つと自動でブラウザが立ち上がりテストが開始されます。また、監視ファイルが更新された際にも再テストが自動で行われます。
2014年08月05日
Mocha+Chai+Sinon.JS 入門
最近注目のテストフレームワーク「Mocha」、軽量ですがアサーション機能すらありませんので別のライブラリを組み合わせて使うのが一般的。今回はアサーションライブラリとして「Chai」とテストタブル用にSinon.JSをチョイス。
Mochaはnode.jsでも利用できますがクライアントJavaScriptではGitHubからダウンロードしたmocha.cssとmocha.jsを読み込みます、今回はChaiとSinon.JSを読み込んだ以下のテンプレートで解説をします。
以下の箇所ではmochaの設定でスタイルをBDD(ビヘイビア駆動開発 )にしてchaiのexpectを利用するようにしています。
テストコードではJasmineと同じようにdescribe()で見出しをつけて記述していきます。
describe()は入れ子でも利用できます。
テストはit()を利用して記述します。
実際のテストでは以下のアサーションメソッドを利用利します。
これでブラウザを見ればテストが成功しているのがわかります。
mochaはBDDを利用する場合はJasmineと利用方法が変わらないので問題ないでしょう。chaiは少し利用方法が違います。
.toや.equalといったメソッドをチェーンさせながら記述します。
たとえば以下のように.notを追加することでaとbは同じじゃない、つまり異なることをテストしています。
参考:Expect / Should - Chai
Sinon.JSはテストダブルを行うことができます。
たとえば次のような謎のメソッドがあったとします。
a.b()のテストは以下の様な感じでできます。
しかし、a()のテストはできません。a()ではb()が実行されているかテストしたいのです。Sinon.JSを利用すると以下のようにテストできます。
Mocha
Mochaはnode.jsでも利用できますがクライアントJavaScriptではGitHubからダウンロードしたmocha.cssとmocha.jsを読み込みます、今回はChaiとSinon.JSを読み込んだ以下のテンプレートで解説をします。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="mocha.css">
</head>
<body>
<div id="mocha"></div>
<script src="mocha.js"></script>
<script src="chai.js"></script>
<script src="sinon-1.10.3.js"></script>
<script>
mocha.setup('bdd');
var expect = chai.expect;
window.onload = function() {
mocha.run();
};
</script>
<script src="テストするコード"></script>
<script src="テストコード"></script>
<div id="sandbox"></div>
</body>
</html>
以下の箇所ではmochaの設定でスタイルをBDD(ビヘイビア駆動開発 )にしてchaiのexpectを利用するようにしています。
mocha.setup('bdd');
var expect = chai.expect;
window.onload = function() {
mocha.run();
};
テストコードではJasmineと同じようにdescribe()で見出しをつけて記述していきます。
describe('テスト内容', function() {
//テストコード
});
describe()は入れ子でも利用できます。
describe('テスト内容1', function() {
describe('テスト内容1-1', function() {
//テストコード
});
describe('テスト内容1-2', function() {
//テストコード
});
});
テストはit()を利用して記述します。
describe('テスト内容', function() {
it("メソッドが存在する", function() {
//テストコード
});
});
実際のテストでは以下のアサーションメソッドを利用利します。
describe('テスト内容', function() {
it("aがおんなじ", function() {
expect("a").to.equal("a");
});
});
これでブラウザを見ればテストが成功しているのがわかります。
chaiの利用方法
mochaはBDDを利用する場合はJasmineと利用方法が変わらないので問題ないでしょう。chaiは少し利用方法が違います。
.toや.equalといったメソッドをチェーンさせながら記述します。
たとえば以下のように.notを追加することでaとbは同じじゃない、つまり異なることをテストしています。
describe('テスト内容', function() {
it("aとbがちがう", function() {
expect("a").to.not.equal("b");
});
});
参考:Expect / Should - Chai
Sinon.JSの使い方
Sinon.JSはテストダブルを行うことができます。
たとえば次のような謎のメソッドがあったとします。
var a = function(){
b();
}
var b = function(){
return "b";
}
a.b()のテストは以下の様な感じでできます。
it("bのテスト", function() {
var value = b();
expect(value).to.equal("b");
});
しかし、a()のテストはできません。a()ではb()が実行されているかテストしたいのです。Sinon.JSを利用すると以下のようにテストできます。
it("aのテスト", function() {
var spy = sinon.spy(window,'b');
a();
expect(spy.callCount).to.equal(1);
});
Jasmine入門
Jasmineは様々な機能が盛り込まれた汎用型のJavaScriptテストフレームワーク。
ダウンロードしたファイルの中からdist/jasmine-standalone-2.0.1.zipを解凍して利用します。以下のようにtest用のHTMLを作成しします。
テストコードではdescribe()で見出しをつけて記述していきます。
describe()は入れ子でも利用できます。
テストはit()を利用して記述します。
実際のテストでは以下のアサーションメソッドを利用利します。
expect(A).toEqual(B)
expect(A).toEqual(B)でAとBの値が等しいかテストを行います。
expect(A).toBe(B)
expect(A).toBe(B)でAとBが同じオブジェクトかテストを行います。
以下の場合は異なるオブジェクトとしてテストは失敗します。
以下の場合は同じオブジェクトとしてテストは成功します。
expext(A).toBeDefined()
expext(A).toBeDefined()ではAが定義されているかテストをします。
以下の場合はbar1は定義されていないのでテストは失敗します。
以下の場合はbar1は定義されているのでテストは成功します。
他にも、
expect(A).toBeNull()でAがNULLであるかテストを行う
expect(A).toBeTruthy()でAがtrueであるかテストを行う
expect(A).toBeFalsy()でAがfalseであるかテストを行う
expect(A).toContain(B)でAにBが含まれているかテストを行う
expect(A).toBeLessThan(B)でAよりBが小さいかテストを行う
expect(A).toBeGreaterThan(b)でBよりAが小さいかテストを行う
expect(fn).toThrow(e)でfnが例外をスローするかテストを行う
などが可能です。
beforeEach()やafterEach()を利用するとit()が実行される前後に処理を差し込むことができます。
次のようなコードを実行すると
以下の様にコンソールが表示されます
参考 : JasmineによるJavaScriptのテスト その4 « サーバーワークス エンジニアブログ
ダウンロードしたファイルの中からdist/jasmine-standalone-2.0.1.zipを解凍して利用します。以下のようにtest用のHTMLを作成しします。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jasmine Example</title>
<link rel="shortcut icon" type="image/png" href="lib/jasmine-2.0.1/jasmine_favicon.png">
<link rel="stylesheet" href="lib/jasmine-2.0.1/jasmine.css">
<script src="lib/jasmine-2.0.1/jasmine.js"></script>
<script src="lib/jasmine-2.0.1/jasmine-html.js"></script>
<script src="lib/jasmine-2.0.1/boot.js"></script>
<script src="テストするJS"></script>
<script>
//テストコード
</script>
</head>
<body>
</body>
</html>
テストコードではdescribe()で見出しをつけて記述していきます。
describe('テスト内容', function() {
//テストコード
});
describe()は入れ子でも利用できます。
describe('テスト内容1', function() {
describe('テスト内容1-1', function() {
//テストコード
});
describe('テスト内容1-2', function() {
//テストコード
});
});
テストはit()を利用して記述します。
describe('テスト内容', function() {
it("メソッドが存在する", function() {
//テストコード
});
});
実際のテストでは以下のアサーションメソッドを利用利します。
expect(A).toEqual(B)
expect(A).toEqual(B)でAとBの値が等しいかテストを行います。
describe('テスト内容', function() {
it('expect("a").toEqual("a")', function() {
expect("a").toEqual("a");
});
});
expect(A).toBe(B)
expect(A).toBe(B)でAとBが同じオブジェクトかテストを行います。
以下の場合は異なるオブジェクトとしてテストは失敗します。
describe('テスト内容', function() {
it('expect(bar1).toBe(bar2)', function() {
var bar1 = {"foo":"daaa"};
var bar2 = {"foo":"daaa"};
expect(bar1).toBe(bar2);
});
});
以下の場合は同じオブジェクトとしてテストは成功します。
describe('テスト内容', function() {
it('expect(bar1).toBe(bar2)', function() {
var bar1 = {"foo":"daaa"};
var bar2 = bar1;
expect(bar1).toBe(bar2);
});
});
expext(A).toBeDefined()
expext(A).toBeDefined()ではAが定義されているかテストをします。
以下の場合はbar1は定義されていないのでテストは失敗します。
describe('テスト内容', function() {
it('expect(bar1).toBeDefined()', function() {
expect(bar1).toBeDefined();
});
});
以下の場合はbar1は定義されているのでテストは成功します。
describe('テスト内容', function() {
it('expect(bar1).toBeDefined()', function() {
var bar1="aa";
expect(bar1).toBeDefined();
});
});
他にも、
expect(A).toBeNull()でAがNULLであるかテストを行う
expect(A).toBeTruthy()でAがtrueであるかテストを行う
expect(A).toBeFalsy()でAがfalseであるかテストを行う
expect(A).toContain(B)でAにBが含まれているかテストを行う
expect(A).toBeLessThan(B)でAよりBが小さいかテストを行う
expect(A).toBeGreaterThan(b)でBよりAが小さいかテストを行う
expect(fn).toThrow(e)でfnが例外をスローするかテストを行う
などが可能です。
beforeEach()やafterEach()を利用するとit()が実行される前後に処理を差し込むことができます。
次のようなコードを実行すると
describe('テスト内容', function() {
beforeEach(function(){
console.log("beforeEach");
});
it('test1', function() {
console.log("test1");
expect("a").toEqual("a");
});
it('test2', function() {
console.log("test2");
expect("a").toEqual("a");
});
afterEach(function(){
console.log("afterEach");
});
});
以下の様にコンソールが表示されます
beforeEach
test1
afterEach
beforeEach
test2
afterEach
参考 : JasmineによるJavaScriptのテスト その4 « サーバーワークス エンジニアブログ
2014年07月30日
QUnit入門
JavaScriptテストフレームワークの「QUnit」について解説します。
まずはQUnitのJSファイルとCSSファイルを読み込みます。
以下、コードとテストコードの別けて解説していきます。
QUnitではQUnit.test( )でテストを定義できます。第1引数にテストの名前、第2引数にコールバック関数としてテストの内容を記述します。
コールバック関数内ではassertオブジェクトを利用できます。
assert.ok()では第1引数でstate(boolean値に変換されたもの)、第2引数にメッセージを指定できます。
以下のサンプルでは最初に2つのassert.ok( )以外は失敗を返します。
他にもassert.deepEqual()で第1引数と第2引数に与えられたオブジェクトが同一の値を持つか確認したり、
assert.equal()で値が同じかどうか確認できます。
expect()でテストの回数を指定できます。expect( 2 )と指定すると2回assertがsuccessを返さなければ失敗とみなします。
イベントの確認はtriggerを利用して確認。
非同期のテストはQUnit.asyncTest()とQUnit.start()を利用する。
まずはQUnitのJSファイルとCSSファイルを読み込みます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>QUnit Example</title>
<link rel="stylesheet" href="http://code.jquery.com/qunit/qunit-1.14.0.css">
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<script src="http://code.jquery.com/qunit/qunit-1.14.0.js"></script>
<script>
//コード
</script>
<script>
//テストコード
</script>
</body>
</html>
以下、コードとテストコードの別けて解説していきます。
QUnitではQUnit.test( )でテストを定義できます。第1引数にテストの名前、第2引数にコールバック関数としてテストの内容を記述します。
QUnit.test( "hello test", function( assert ) {
assert.ok( 1 == "1", "Passed!" );
});
コールバック関数内ではassertオブジェクトを利用できます。
assert.ok()では第1引数でstate(boolean値に変換されたもの)、第2引数にメッセージを指定できます。
以下のサンプルでは最初に2つのassert.ok( )以外は失敗を返します。
QUnit.test( "hello test", function( assert ) {
assert.ok( true, "true succeeds" );
assert.ok( "non-empty", "non-empty string succeeds" );
assert.ok( false, "false fails" );
assert.ok( 0, "0 fails" );
assert.ok( NaN, "NaN fails" );
assert.ok( "", "empty string fails" );
assert.ok( null, "null fails" );
assert.ok( undefined, "undefined fails" );
});
他にもassert.deepEqual()で第1引数と第2引数に与えられたオブジェクトが同一の値を持つか確認したり、
QUnit.test( "deepEqual test", function( assert ) {
var obj = { foo: "bar" };
assert.deepEqual( obj, { foo: "bar" }, "Two objects can be the same in value" );
});
assert.equal()で値が同じかどうか確認できます。
QUnit.test( "equal test", function( assert ) {
assert.equal( 0, 0, "Zero, Zero; equal succeeds" );
assert.equal( "", 0, "Empty, Zero; equal succeeds" );
assert.equal( "", "", "Empty, Empty; equal succeeds" );
assert.equal( "three", 3, "Three, 3; equal fails" );
assert.equal( null, false, "null, false; equal fails" );
});
expect()でテストの回数を指定できます。expect( 2 )と指定すると2回assertがsuccessを返さなければ失敗とみなします。
QUnit.test( "a test", function( assert ) {
expect( 2 );
function calc( x, operation ) {
return operation( x );
}
var result = calc( 2, function( x ) {
assert.ok( true, "calc() calls operation function" );
return x * x;
});
assert.equal( result, 4, "2 squared equals 4" );
});
イベントの確認はtriggerを利用して確認。
QUnit.test( "a test", function( assert ) {
expect( 1 );
var $body = $( "body" );
$body.on( "click", function() {
assert.ok( true, "body was clicked!" );
});
$body.trigger( "click" );
});
非同期のテストはQUnit.asyncTest()とQUnit.start()を利用する。
QUnit.asyncTest( "asynchronous test: one second later!", function( assert ) {
expect( 1 );
setTimeout(function() {
assert.ok( true, "Passed and ready to resume!" );
QUnit.start();
}, 1000);
});