2020年06月01日

react-testing-libraryでimportされたモジュールをテスト

以下のようなコードのテスト

// 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'
}



テストコード中に以下のコードの記述があればfooやfoo2をmockとして利用できる

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);

});



モックした関数の返り値などはmockReturnValueで定義できるのんで

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>
);
}


以下のようにmyTextに外部注入した関数の返り値が設定されているのが確認できる

test('set text', () => {
const { getByTestId } = render();

foo.mockReturnValue("ok1")

fireEvent.click(getByTestId('trigger1'))

expect(getByTestId('text')).toHaveTextContent(/^ok1$/)
})


ちなみに、toHaveTextContentは正規表現で完全一致か検証できる。

textContentを利用した以下の比較でもよい

expect(getByTestId('text').textContent).toBe('ok1')
posted by ねこまんま at 23:55 | test | 更新情報をチェックする