Reactでユニットテスト #scripty05

1.

Reactでユニットテスト 2016/3/17 ヤフー株式会社マーケティングソリューションカンパニー開発本部 UIフロントエンド開発部森本恭平 (@basara669)

2.

3.

4.

5.

6.

7.

8.

9.

10.

11.

12.

13.

14.

15.

16.

17.

18.

19.

フレームワークとアサーション・テスティングフレームワーク：テストを記述する関数群を提供し、それらの関数を使って書かれたテストの結果を判定、集計した上で結果を表示する機能・アサーションライブラリ：テスティングフレームワークは、テスト結果を管理するライブラリですが、実行結果を判定する ※引用元：http://codezine.jp/article/detail/7367 Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

20.

21.

最初のテスト import expect from 'expect'; describe('first test', () => { });

22.

最初のテスト import expect from 'expect'; describe('first test', () => { it('同じもの比較してるんだからtrue', () => { }); });

23.

[beta]

最初のテスト
import expect from 'expect';
describe('first test', () => {
it('同じもの比較してるんだからtrue', () => {
expect(true).toEqual(true);
});
});

24.

25.

26.

[beta]

テストする関数
export default function(uniqueNumber,
description) {
const shortKebabDescription = description
.toLowerCase()
.split(' ')
.slice(0, 2)
.join('-');
return `${uniqueNumber}-${shortKebabDescription}`;
}

27.

28.

関数のテスト import expect from 'expect'; describe('createId関数の試験', () => { });

29.

[beta]

関数のテスト
import expect from 'expect';
import createId from './createId';
describe('createId関数の試験', () => {
});

30.

[beta]

関数のテスト
import expect from 'expect';
import createId from './createId';
describe('createId関数の試験', () => {
it('ユニークなIDを返却', () => {
});
});

31.

[beta]

関数のテスト
import expect from 'expect';
import createId from './createId';
describe('createId関数の試験', () => {
it('ユニークなIDを返却', () => {
const actual = createId(123, 'Cool example
description');
});
});

32.

[beta]

関数のテスト
import expect from 'expect';
import createId from './createId';
describe('createId関数の試験', () => {
it('ユニークなIDを返却', () => {
const actual = createId(123, 'Cool example
description');
const expected = `123-cool-example`;
});
});

33.

[beta]

関数のテスト
import expect from 'expect';
import createId from './createId';
describe('createId関数の試験', () => {
it('ユニークなIDを返却', () => {
const actual = createId(123, 'Cool example
description');
const expected = `123-cool-example`;
expect(actual).toEqual(expected);
});
});

34.

35.

36.

37.

38.

[beta]

テストするコンポーネント
import React from 'react';
const CoolComponent = ({greeting}) => (
<div className="red">
<h1>Greeting</h1>
<div>{greeting}!</div>
</div>
);

39.

[beta]

import React from 'react';
import expect from 'expect';
const CoolComponent = ({greeting}) => (
<div className="red">
<h1>Greeting</h1>
<div>{greeting}!</div>
</div>
);
describe('CoolComponentのテスト', () => {
it('classのチェック', () => {
expect(actual).toEqual(expected);
});
});

40.

[beta]

import React from 'react';
import TestUtils from 'react-addons-test-utils';
import expect from 'expect';
const CoolComponent = ({greeting}) => (
<div className="red">
<h1>Greeting</h1>
<div>{greeting}!</div>
</div>
);
describe('CoolComponentのテスト', () => {
it('classのチェック', () => {
const renderer = TestUtils.createRenderer();
renderer.render(<CoolComponent greeting='hello world' /
>);
const actual = renderer.getRenderOutput();
});
});

41.

[beta]

import React from 'react';
import TestUtils from 'react-addons-test-utils';
import expect from 'expect';
const CoolComponent = ({greeting}) => (
<div className="red">
<h1>Greeting</h1>
<div>{greeting}!</div>
</div>
);
describe('CoolComponentのテスト', () => {
it('classのチェック', () => {
const renderer = TestUtils.createRenderer();
renderer.render(<CoolComponent greeting='hello world' /
>);
const actual = renderer.getRenderOutput();
console.log(actual)
});
});

42.

CoolComponent { '$$typeof': Symbol(react.element), type: 'div', key: null, ref: null, props: { className: 'red', children: [ [Object], [Object] ] }, _owner: { _currentElement: { '$$typeof': Symbol(react.element), type: [Function: CoolComponent], key: null, ref: null, props: [Object], _owner: null, _store: {} }, _rootNodeID: '.4hqupilt6o', _instance: StatelessComponent { props: [Object], context: {}, refs: {}, updater: [Object], _reactInternalInstance: [Circular], state: null }, _pendingElement: null, _pendingStateQueue: null, _pendingReplaceState: false, _pendingForceUpdate: false, _renderedComponent: { _renderedOutput: [Circular], _currentElement: [Circular] }, _context: {}, _mountOrder: 2, _topLevelWrapper: null, _pendingCallbacks: null }, _store: {} }

43.

CoolComponent { '$$typeof': Symbol(react.element), type: 'div', key: null, ref: null, props: { className: 'red', children: [ [Object], [Object] ] }, _owner: { _currentElement: { '$$typeof': Symbol(react.element), type: [Function: CoolComponent], key: null, ref: null, props: [Object], _owner: null, _store: {} }, _rootNodeID: '.4hqupilt6o', _instance: StatelessComponent { props: [Object], context: {}, refs: {}, updater: [Object], _reactInternalInstance: [Circular], state: null }, _pendingElement: null, _pendingStateQueue: null, _pendingReplaceState: false, _pendingForceUpdate: false, _renderedComponent: { _renderedOutput: [Circular], _currentElement: [Circular] }, _context: {}, _mountOrder: 2, _topLevelWrapper: null, _pendingCallbacks: null }, _store: {} }

44.

45.

[beta]

import React from 'react';
import TestUtils from 'react-addons-test-utils';
import expect from 'expect';
const CoolComponent = ({greeting}) => (
<div className="red">
<h1>Greeting</h1>
<div>{greeting}!</div>
</div>
);
describe('CoolComponentのテスト', () => {
it('hello worldが出ている', () => {
const renderer = TestUtils.createRenderer();
renderer.render(<CoolComponent greeting='hello world' />);
const actual = renderer.getRenderOutput();
const expected = <div>hello world!</div>;
expect(actual).toEqual(expected);
});
});

46.

[beta]

23 passing (21ms)
1 failing
1) CoolComponent should render the greeting:
Error: Expected { $$typeof: Symbol(react.element), _owner: { _context: {}, _currentElement: {
{}, key: null, props: { greeting: 'hello world' }, ref: null, type: [Function: CoolComponent] }, _i
nternal: [Function], enqueueForceUpdate: [Function], enqueueReplaceProps: [Function], enqueueReplac
on], enqueueSetProps: [Function], enqueueSetPropsInternal: [Function], enqueueSetState: [Function],
lbacks: null, _pendingElement: null, _pendingForceUpdate: false, _pendingReplaceState: false, _pend
nt: [Circular], _renderedOutput: [Circular] }, _rootNodeID: '.1n30ss7jjeo', _topLevelWrapper: null
f: Symbol(react.element), _owner: { _context: [Object], _currentElement: [Object], _instance: [Obje
lement: null, _pendingForceUpdate: false, _pendingStateQueue: null, _pendingStateQueue: null, _r
_topLevelWrapper: null }, _store: {}, key: null, props: { children: 'Greeting' }, ref: null, type:
ontext: [Object], _currentElement: [Object], _instance: [Object], _mountOrder: 31, _pendingCallback
se, _pendingReplaceState: false, _pendingStateQueue: null, _renderedComponent: [Object], _rootNodeI
key: null, props: { children: [Object] }, ref: null, type: 'div' }, className: 'red', ref: nul
nt), _owner: null, _store: {}, key: null, props: { children: 'hello world!' }, ref: null, type: 'di
+ expected - actual

47.

CoolComponent { '$$typeof': Symbol(react.element), type: 'div', key: null, ref: null, props: { className: 'red', children: [ [Object], [Object] ] }, _owner: { _currentElement: { '$$typeof': Symbol(react.element), type: [Function: CoolComponent], key: null, ref: null, props: [Object], _owner: null, _store: {} }, _rootNodeID: '.4hqupilt6o', _instance: StatelessComponent { props: [Object], context: {}, refs: {}, updater: [Object], _reactInternalInstance: [Circular], state: null }, _pendingElement: null, _pendingStateQueue: null, _pendingReplaceState: false, _pendingForceUpdate: false, _renderedComponent: { _renderedOutput: [Circular], _currentElement: [Circular] }, _context: {}, _mountOrder: 2, _topLevelWrapper: null, _pendingCallbacks: null }, _store: {} }

48.

expect-jsx

49.

[beta]

import React from 'react';
import TestUtils from 'react-addons-test-utils';
import expect from 'expect';
const CoolComponent = ({greeting}) => (
<div className="red">
<h1>Greeting</h1>
<div>{greeting}!</div>
</div>
);
describe('CoolComponentのテスト', () => {
it('hello worldが出ている', () => {
const renderer = TestUtils.createRenderer();
renderer.render(<CoolComponent greeting='hello world' />);
const actual = renderer.getRenderOutput();
const expected = <div>hello world!</div>;
expect(actual).toEqual(expected);
});
});

50.

[beta]

import React from 'react';
import TestUtils from 'react-addons-test-utils';
import expect from 'expect';
import expectJSX from 'expect-jsx';
expect.extend(expectJSX);
const CoolComponent = ({greeting}) => (
<div className="red">
<h1>Greeting</h1>
<div>{greeting}!</div>
</div>
);
describe('CoolComponentのテスト', () => {
it('hello worldが出ている', () => {
const renderer = TestUtils.createRenderer();
renderer.render(<CoolComponent greeting='hello world' />);
const actual = renderer.getRenderOutput();
const expected = <div>hello world!</div>;
});
});

51.

[beta]

import React from 'react';
import TestUtils from 'react-addons-test-utils';
import expect from 'expect';
import expectJSX from 'expect-jsx';
expect.extend(expectJSX);
const CoolComponent = ({greeting}) => (
<div className="red">
<h1>Greeting</h1>
<div>{greeting}!</div>
</div>
);
describe('CoolComponentのテスト', () => {
it('hello worldが出ている', () => {
const renderer = TestUtils.createRenderer();
renderer.render(<CoolComponent greeting='hello world' />);
const actual = renderer.getRenderOutput();
const expected = <div>hello world!</div>;
// expect(actual).toEqualJSX(expected);
expect(actual).toIncludeJSX(expected);
});
});

52.

53.

Reactでユニットテスト #scripty05

Yahoo!デベロッパーネットワーク

関連スライド

深層学習による自然言語処理入門: word2vecからBERT, GPT-3まで

ゼロから始める転移学習

ヤフーにおける WebAuthn と Passkey の UX の紹介と考察 #idcon #fidcon

OpenID Connectとネイティブアプリを取り巻く仕様と動向 Yahoo! JAPANの取り組み #openid #openid_tokyo

運用業務とスクラムは本当に組み合わせにくいのか︖運用業務が大半を占めるプロダクト開発での試行錯誤

ヤフーのオンプレ機械学習基盤AIPFについて #ml_kubernetes

各ページのテキスト