React Router - 渲染 function - React 测试库

Question

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

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

应用程序.test.js

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

应用程序.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>

Answer 1

最终顺利完成了React Router的单元测试，得到了Route的render function的代码覆盖率。

应用程序.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);
});