Тестирование стилизованных компонентов с помощью react-testing-library

В настоящее время я пытаюсь протестировать стилизованный компонент с помощью Mocked Provider следующим образом:

import React from "react";
import TestResults from "./TestResults";
import {
  render,
  cleanup,
  findByTestId,
  findByText,
  waitForElement,
} from "@testing-library/react";
import { MockedProvider } from "@apollo/react-testing";




describe("TestResultsComponent", () => {
  describe("Overall", () => {
    it("should render successfully - base", async () => {
      const { getByText } = render(
        <MockedProvider>
          <TestResults />
        </MockedProvider>
      );
      expect(getByText("Preview")).toBeInTheDocument();
    });
  });
});

Я использую крючок makeStyles в файле TestResults

Когда я запускаю свои тесты, я получаю следующую ошибку:

TypeError: theme.spacing is not a function
 Material-UI: the `styles` argument provided is invalid.
      You are providing a function without a theme in the context.
      One of the parent elements needs to use a ThemeProvider.

I'm not sure if I should mock out the implementation of makeStyles. This is the my first time seeing an error like this, I have been testing other components that use the same hook and it has not been an issue.

reactjs unit-testing react-testing-library apollo-client react-apollo
person Francisco Banda    schedule 09.06.2020    source источник

Ответы (2)


arrow_upward
6
arrow_downward

@material-ui/styles решение для стилизации является автономным, оно ничего не знает о компонентах Material-UI. Вам нужно использовать ThemeProvider из пакета style-components с функцией const theme = createMuiTheme() из основного пакета и визуализировать это с помощью вашего теста. В лучшем случае вы определили свою тему уже где-то в своем приложении и просто можете импортировать ее.

так что ваш тест должен выглядеть так:

import React from "react";
import {ThemeProvider} from 'styled-components';
import { createMuiTheme } from '@material-ui/core/styles';
import TestResults from "./TestResults";
import {
  render,
  cleanup,
  findByTestId,
  findByText,
  waitForElement,
} from "@testing-library/react";
import { MockedProvider } from "@apollo/react-testing";

describe("TestResultsComponent", () => {
  describe("Overall", () => {
    it("should render successfully - base", async () => {
      const theme = createMuiTheme()
      const { getByText } = render(
        <ThemeProvider theme={muiTheme}>
          <MockedProvider>
            <TestResults />
          </MockedProvider>
        </ThemeProvider>
      );
      expect(getByText("Preview")).toBeInTheDocument();
    });
  });
})

Если этот шаблон для упаковки ваших компонентов становится слишком большим, вы также можете написать Wrapper-Component, который устанавливает ваши необходимые компоненты и передает этот компонент в качестве второго аргумента в render-Options

См. Документацию по оболочке здесь

person takethefake    schedule 11.06.2020
comment
спасибо за понимание @takethefake. Есть ли разница в импорте ThemeProvider из @ material-ui / styles в отличие от 'styled-components? Также к вашему мнению о настраиваемой теме, я уже определил ее в своем приложении, поэтому я передам ее поставщику в качестве реквизита темы. Бывший. ‹ThemeProvider theme = {customTheme}› - person Francisco Banda; 12.06.2020

arrow_upward
0
arrow_downward

Благодаря ответу @takethefake, в моем случае мы не использовали MaterialUi, но он был очень похож:

import React from 'react';
import { render, screen } from '@testing-library/react';
import { ThemeProvider } from 'styled-components';
import { STRING } from '../constants';
import Theme from '../styles/theme';
import { PreOnboarding } from './PreOnboarding';

test('la valeur `trigger.cta` est utilisée comme fallback du titre', () => {
  const trigger = { cta: 'fallback title', text: STRING.empty };
  const theme = Theme({ color1: 'red', color2: 'blue' });

  render(
    <ThemeProvider theme={theme}>
      <PreOnboarding trigger={trigger} />
    </ThemeProvider>
  );
  const button = screen.getByRole('label', { name: /fallback title/i });
  expect(button).toBeVisible();
});
person Édouard Lopez    schedule 15.02.2021