要素が存在しないことをテストするにはqueryByTestIdで指定してtoBeNull()が帰ってくることをテストする。
expect(queryByTestId('test')).toBeNull()
expect(queryByTestId('test')).toBeNull()
// import元
export const useFoo = () => {
const foo1 = () => 1
const foo2 = () => 1
return {
foo1,
foo2
}
}
// test code
import * as useFooHooks from "./useFoo"
test("test",()=>{
const useFooSpy = jest.spyOn(useFooHooks, 'useFoo')
useFooSpy.mockReturnValue({
foo1:jest.fn()
})
})
test("test",()=>{
const useFooSpy = jest.spyOn(useFooHooks, 'useFoo') as jest.Mock
useFooSpy.mockReturnValue({
foo1:jest.fn()
})
})
// App.js
import React , {useState} from 'react';
import foo1 , { foo2 } from './Foo';
export default function App() {
return (
<div className="App">
<button data-testid="trigger1" onClick={foo1}>click</button>
<button data-testid="trigger2" onClick={foo2}>click</button>
</div>
);
}
// Foo.js
export default function foo(){
return 'ok1'
}
export function foo2(){
return 'ok2'
}
import foo , { foo2 } from './Foo';
jest.mock('./Foo')
import React from 'react';
import { render ,fireEvent } from '@testing-library/react';
import App , { App2 } from './App';
import foo , { foo2 } from './Foo';
jest.mock('./Foo')
test('click', () => {
const { getByTestId } = render( );
expect(foo).not.toHaveBeenCalled();
expect(foo2).not.toHaveBeenCalled();
fireEvent.click(getByTestId('trigger1'))
expect(foo).toHaveBeenCalledTimes(1);
expect(foo2).not.toHaveBeenCalled();
fireEvent.click(getByTestId('trigger2'))
expect(foo).toHaveBeenCalledTimes(1);
expect(foo2).toHaveBeenCalledTimes(1);
fireEvent.click(getByTestId('trigger1'))
expect(foo).toHaveBeenCalledTimes(2);
expect(foo2).toHaveBeenCalledTimes(1);
});
export function App2() {
const [myText, changeMyText] = useState("")
const handleFoo = () => {
changeMyText(foo1())
}
return (
<div className="App">
<p data-testid="text">{myText}
<button data-testid="trigger1" onClick={handleFoo}>click</button>
</div>
);
}
test('set text', () => {
const { getByTestId } = render( );
foo.mockReturnValue("ok1")
fireEvent.click(getByTestId('trigger1'))
expect(getByTestId('text')).toHaveTextContent(/^ok1$/)
})
expect(getByTestId('text').textContent).toBe('ok1')
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
})
})
})
npm install --save-dev jest
npm install --save-dev babel-jest babel-core regenerator-runtime
export default sum = (a, b) => a + b
import sum from './sum'
test('adds 1 + 2 to equal 3', () => {
expect(sum(1, 2)).toBe(3);
})
export default (a,b) => a + b;
import sum from './sum';
test('sum',()=>{
expect(sum(2,3)).toBe(5);
})
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 }
],
(中略)
});
}
if(location.port==9876){
jasmine.getFixtures().fixturesPath = 'base/fixtures/';
}else{
jasmine.getFixtures().fixturesPath = '../fixtures/';
}
npm install karma-jasmine --save-dev
npm install karma-jasmine@2_0 --save-dev
gem install selenium-webdriver
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
ruby tesr.rb
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
npm install -g karma
karma --version
npm install -g karma-cli
karma --version
Karma version: 0.12.21
karma init
karma start
<!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.setup('bdd');
var expect = chai.expect;
window.onload = function() {
mocha.run();
};
describe('テスト内容', function() {
//テストコード
});
describe('テスト内容1', function() {
describe('テスト内容1-1', function() {
//テストコード
});
describe('テスト内容1-2', function() {
//テストコード
});
});
describe('テスト内容', function() {
it("メソッドが存在する", function() {
//テストコード
});
});
describe('テスト内容', function() {
it("aがおんなじ", function() {
expect("a").to.equal("a");
});
});
describe('テスト内容', function() {
it("aとbがちがう", function() {
expect("a").to.not.equal("b");
});
});
var a = function(){
b();
}
var b = function(){
return "b";
}
it("bのテスト", function() {
var value = b();
expect(value).to.equal("b");
});
it("aのテスト", function() {
var spy = sinon.spy(window,'b');
a();
expect(spy.callCount).to.equal(1);
});
<!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('テスト内容', function() {
//テストコード
});
describe('テスト内容1', function() {
describe('テスト内容1-1', function() {
//テストコード
});
describe('テスト内容1-2', function() {
//テストコード
});
});
describe('テスト内容', function() {
it("メソッドが存在する", function() {
//テストコード
});
});
describe('テスト内容', function() {
it('expect("a").toEqual("a")', function() {
expect("a").toEqual("a");
});
});
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);
});
});
describe('テスト内容', function() {
it('expect(bar1).toBeDefined()', function() {
expect(bar1).toBeDefined();
});
});
describe('テスト内容', function() {
it('expect(bar1).toBeDefined()', function() {
var bar1="aa";
expect(bar1).toBeDefined();
});
});
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
<!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.test( "hello test", function( assert ) {
assert.ok( 1 == "1", "Passed!" );
});
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" );
});
QUnit.test( "deepEqual test", function( assert ) {
var obj = { foo: "bar" };
assert.deepEqual( obj, { foo: "bar" }, "Two objects can be the same in value" );
});
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" );
});
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" );
});
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( "asynchronous test: one second later!", function( assert ) {
expect( 1 );
setTimeout(function() {
assert.ok( true, "Passed and ready to resume!" );
QUnit.start();
}, 1000);
});