Покрытие кода возвращается 0% при использовании withRouter

Question

Краткое резюме - у меня есть приложение React. Библиотека модульного тестирования является библиотекой реагирующего тестирования. Компонент заключен в withRouter от Reaction-router-dom

Проблема - покрытие кода отображается как 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

withRouter предназначен для использования в вашем приложении для ввода данных маршрутизатора.

В ваших тестах вы должны визуализировать маршрутизатор как часть дерева компонентов:

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

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

Я предлагаю вам не использовать полагаться только на тестирование снимков, если вы хотите убедиться, что ваше приложение работает правильно.

Answer 2

Я думаю, что ваш тест должен выглядеть примерно так:

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