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