208 - 《Umi 最佳实践：路由级单测》

计划近期每周更新 1 篇 Bigfish 2022 版的最佳实践，这是第 5 篇。

问题

虽然是中后台，但也有重要业务，同时他们可能有单测需求。有了单测后，修改代码、升级依赖、框架大版本更新时都会更放心。现在 Bigfish 只能做单测，主要是针对 util、组件、lib、service 这类。但是 Bigfish 有不少插件，框架集成的，比如内置的 layout、请求、数据流，这类现在只能做黑盒的 e2e，不能做单测。

那如何解这个问题？想到的思路是让组件在 umi 的 runtime 里运行，这样才能保证全部插件工作。其中一种方式是「路由级单测」，让整个应用可测同时体现在覆盖率里。

新方案

路由级单测是我们提供一个模拟浏览器的组件，传入 path 即可渲染对应的路由。

<TestBrowser path='/' />

而如果要切换路由，用 ref 存下 history，通过命令式的方式做跳转。

const ref = React.createRef();
<TestBrowser historyRef={ref} path='/' />
ref.current.push('/users');

最佳实践

Bigfish 层提供 TestBrowser 接口，支持以上方式。

步骤一、新增 xxx.test.tsx，代码示例如下。

import { act, render } from '@testing-library/react';  
import React from 'react';  
import { TestBrowser } from '@alipay/bigfish';  
  
const waitTime = (time: number = 100) => {  
  return new Promise((resolve) => {  
    setTimeout(() => {  
      resolve(true);  
    }, time);  
  });  
};  
  
test('normal', async