使用withRouter时，代码覆盖率返回0%

Question

快速总结-我有一个React应用程序。单元测试库是react测试库。该组件被封装在来自withRouter -router-dom的react中

问题-代码覆盖率显示为0%，即使它显示通过了8个测试和一些跳过的信息。如果我从withRouter中删除组件，代码覆盖率将显示正确的覆盖率结果。

请检查下面的代码，我正在尝试匹配快照。

// Profile.test.js
import React from "react";
import Profile from "./Profile";
import { withRouter } from "react-router-dom";
import { render } from "react-testing-library";

it("renders the component", async () => {
  const container = withRouter(<Profile />);
  expect(container).toMatchSnapshot();
});

// Profile.js
import react from 'react';
import { withRouter } from "react-router-dom";

const Profile = () => {
    return (
        <div>The profile component</div>
    )
}

export default withRouter(Profile);

我应该能够对组件使用withRouter并查看覆盖率。

Answer 1

我认为你的测试应该是这样的：

it('renders the component', () => {
  const component = mount(<BrowserRouter><Profile /></BrowserRouter>);
  expect(component).toMatchSnapshot();
});

Answer 2

withRouter旨在在您的应用程序中用于注入路由器数据。

在测试中，您必须将路由器呈现为组件树的一部分：

import { MemoryRouter } from 'react-router-dom';

it('renders the component', () => {
  const { container } = render(<MemoryRouter><Profile /></MemoryRouter>);
  expect(container).toMatchSnapshot();
});

如果您想确保您的应用程序正常工作，我建议您不要只使用依赖于快照测试。