React Router - 渲染函数 - React 测试库答案

【问题标题】：React Router - render function - React Testing LibraryReact Router - 渲染函数 - React 测试库
【发布时间】：2021-05-09 06:17:58
【问题描述】：

我是 React 测试库的新手，在为 React 路由器中的渲染函数编写测试用例时面临一些挑战。我不确定获得 Route 的渲染功能的代码覆盖率。有人可以指导我吗？

<Route path="/employee" render={() => <div><h4>Employee Page</h4></div>} />

App.test.js

it('should render Employee Page', () => {
    render(
        <MemoryRouter initialEntries={['/employee']}>
          <App/>
        </MemoryRouter>
    );
    expect(screen.getByText('Employee Page')).toBeInTheDocument();
});

App.js

<Router>
   <div>
      <ul>
         <li><NavLink to="/home">Home</NavLink></li>
         <li><NavLink to="/article">Article</NavLink></li>
         <li><NavLink to="/employee">Employee</NavLink></li>
      </ul> 
      <Switch>
         <Route path="/home"  render={() => <div><h4>Home 
            Page</h4></div>} />
         <Route path="/article"  render={() => <div><h4>Article 
            Page</h4></div>} />
         <Route path="/employee" render={() => <div><h4>Employee 
            Page</h4></div>} />
      </Switch>
   </div>
</Router>

【问题讨论】：

你试过什么？你目前的测试是什么样的？
我使用 React 测试库尝试了上面添加的测试用例。我正在使用 react route 的渲染功能进行内联渲染。我的测试用例取得了成功，但无法获得 Route 中渲染函数的代码覆盖率。
您能否为您的App 组件添加完整代码？
我完成了单元测试并更新了各自的代码sn-ps。在这里为我迟到的回复道歉。

标签： reactjs react-router-dom react-testing-library

【解决方案1】：

终于顺利完成了React Router的单元测试，拿到了Route的render函数的代码覆盖率。

App.test.js

import {createMemoryHistory} from 'history';

it('should render Employee', () => {
    const history = createMemoryHistory(["/", "/employee"])
    history.push('/employee');
    const component = <Router history={history}>
                        <NavLink to="/employee">Employee</NavLink>
                        <App/>
                      </Router>
    render(component);
});

【讨论】：