iT邦幫忙

2021 iThome 鐵人賽

DAY 20
0
Modern Web

我不會測試,所以寫Jest與React Testing Library系列 第 20

Day 20 測試router的前奏

昨天我們講到使用context-util來讓每個測試都包住Provider來達到測試的元件都能取得Provider傳下來的state,那今天我們來講講在測試router之前我們需要做什麼,要先講到History這個函式庫

History

→ 提供三種browserHistory、hashHistory、memoryHistory,並且監聽url的監聽以及提供redirect的方法,因此react-router-dom一定會安裝history這個函式庫.

所以我們要建立一個初始化且擁有history的render,我們就要用render出包含history的監聽,程式如下.

import { createMemoryHistory } from 'history';
import { Router } from 'react-router-dom';
import { render as routerRender } from '@testing-library/react';

function render(ui: any, option: any) {
  const history = createMemoryHistory({
    initialEntries: ['/']
  });

  return routerRender(
    <Router history={history}>
      { ui }
    </Router>, {
      ...option
    }
  )
}

export * from '@testing-library/react';
export { render };

上一篇
Day 19 Provider小Tips
下一篇
Day 21 來開始介紹Cypress
系列文
我不會測試,所以寫Jest與React Testing Library30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言