Reactjs 使用react测试库测试样式化组件

我目前正在尝试使用模拟提供程序测试样式化组件，如下所示：

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();
    });
  });
});

---

@material ui/styles

样式化解决方案是独立的，它对material ui组件一无所知。您需要使用

style components

包中的

ThemeProvider

和核心包中的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();
    });
  });
})

从“React”导入React；
从“样式化组件”导入{ThemeProvider}；
从'@material ui/core/styles'导入{createMuiTheme}；
从“/TestResults”导入测试结果；
进口{
提供，
清理,，
findByTestId，
findByText，
waitForElement，
}来自“@测试库/react”；
从“@apollo/react testing”导入{MockedProvider}”；
描述（“TestResultComponent”，（）=>{
描述（“总体”，（）=>{
它（“应该成功呈现-base”，async（）=>{
const theme=createMuiTheme（）
常量{getByText}=render(
);
expect（getByText（“预览”））.toBeInTheDocument（）；
});
});
})

如果包装组件的样板文件变得非常有用，您还可以编写一个包装组件来设置所需的组件，并将此组件作为第二个参数传递给

呈现

-选项

---

关于包装，请参见文档

感谢@takethefake回答，在我的例子中，我们没有使用MaterialUi，但它非常相似：

从“React”导入React；
从'@testing library/react'导入{render，screen}；
从“样式化组件”导入{ThemeProvider}；
从“../constants”导入{STRING}；
从“../styles/Theme”导入主题；
从“./PreOnboarding”导入{PreOnboarding}；
测试（'la valeur'trigger.cta'est useée comm fallback du titre'，（）=>{
const trigger={cta:'fallback title'，text:STRING.empty}；
const theme=theme（{color1:'红色'，color2:'蓝色'}）；
渲染(
);
const button=screen.getByRole（'label'，{name:/fallback title/i}）；
expect（按钮）.tobevicible（）；
});

感谢您的insight@Takeoffake。从“@material ui/styles”导入ThemeProvider与从“styled components”导入ThemeProvider有什么区别吗？关于自定义主题，我已经在我的应用程序中定义了它，所以我将把它作为主题道具传递给提供商。前任。

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();
    });
  });
})