jestで外部の情報から表示するコンポーネントを分岐するテスト

実現したいこと

reactのアプリケーションでAPIをgetしその内容によってコンポーネントの表示を変更したい。

コード

js
1// TestPage.tsx
2
3const TestPage: React.FC<Props> = (props) => {
4  const [isLogin, setIsLogin] = useState<boolean | undifined>(undifined)
5  const [isLoading, setIsLoading] = useState<boolean>(true)
6
7  useEffect(() => {
8    ;(async () => {
9      const res = await props.fetcher() //trueかfalseが帰ってくるものとする
10
11      if (res.data) {
12        setIsLogin(res.data)
13        setIsLoading(false)
14      } else {
15        console.error(res.data)
16        return
17      }
18    })()
19  }, [])
20
21  return isLoading ? (
22    <SkeletonTestPage />
23  ) : (
24    <Page>
25      <div>
26        <h1>title</h1>
27        {setIsLogin ? (
28          <Menu />
29        ) : (
30          <Login />
31        )}
32      </div>
33    </Page>
34  )
35}
36
37export default TestPage
38

js
1// TestPage.test.tsx
2
3import { render, unmountComponentAtNode } from 'react-dom'
4import { act } from 'react-dom/test-utils'
5import TestPage from './TestPage'
6
7jest.mock('./SkeletonTestPage', () => {
8  const DummySkeletonTestPage = () => (
9    <div data-testid='skeltop-test-page'></div>
10  )
11  return DummySkeletonTestPage
12})
13
14jest.mock('./Menu', () => {
15  const DummyMenu = () => (
16    <div data-testid='menu'></div>
17  )
18  return DummyMenu
19})
20
21jest.mock('./Login', () => {
22  const DummyLogin = () => (
23    <div data-testid='login'></div>
24  )
25  return DummyLogin
26})
27
28let container!: HTMLDivElement
29beforeEach(() => {
30  container = document.createElement('div')
31  document.body.appendChild(container)
32})
33
34afterEach(() => {
35  unmountComponentAtNode(container)
36  container.remove()
37})
38
39describe('TestPage', () => {
40
41  it('初回 render 時に fetcher が呼ばれる', async () => {
42    const fetcher = jest.fn().mockResolvedValue({
43      data: true,
44    })
45
46    await act(async () => {
47      render(<TestPage fetcher={fetcher} />, container)
48    })
49
50    expect(fetcher).toHaveBeenCalledTimes(1)
51  })
52
53  describe('データの取得に失敗したとき', () => {
54    const applicationsData = {
55      data: undifined,
56    }
57
58    const fetcher = jest.fn().mockResolvedValue({
59      data: applicationsData,
60    })
61
62    it('Skeleton Page が表示される', async () => {
63      await act(async () => {
64        render(<TestPage fetcher={fetcher} />, container)
65      })
66
67      expect(
68        container.querySelector('[data-testid="skeleton-test-page"]')
69      ).not.toBeNull()
70    })
71  })