[英]Testing styled components with react-testing-library
I'm currently trying to test a styled component with a Mocked Provider as follows:我目前正在尝试使用 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();
});
});
});
I'm using the makeStyles hook in the TestResults file我在 TestResults 文件中使用 makeStyles 钩子
When I run my tests, I receive the following error:当我运行测试时,我收到以下错误:
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.
@material-ui/styles
styling solution is standalone, it doesn't know anything about Material-UI components. @material-ui/styles
样式解决方案是独立的,它对 Material-UI 组件一无所知。 You need to use the ThemeProvider
from the style-components
package with the const theme = createMuiTheme()
function from the core package and render this with your test.您需要使用
style-components
package 中的ThemeProvider
和 const theme = createMuiTheme()
function 来自核心 ZEFE90A8E604A7C840E88D03A67F6B7D 和您的测试。 Best case would be that you have defined your theme already somewhere in your application and simply can import it.最好的情况是您已经在应用程序的某个地方定义了主题,并且可以简单地导入它。
so your test should become:所以你的测试应该变成:
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();
});
});
})
If this boilerplate for wrapping your components becomes to much you can also write a Wrapper-Component which sets up your needed components and pass this component as second argument to the render
-Options如果这个用于包装你的组件的样板变得太多,你也可以编写一个 Wrapper-Component 来设置你需要的组件并将这个组件作为第二个参数传递给
render
-Options
Thank to @takethefake answer, in my case we didn't use MaterialUi but it was quite similar:感谢@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();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.