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