如何在与酶反应或反应测试库中测试材料-UI的响应性用户界面(如隐藏、网格、断点) [英] How to test Material-UI's Responsive UI (e.g. Hidden, Grid, Breakpoints) in React with Enzyme or React Testing Library
本文介绍了如何在与酶反应或反应测试库中测试材料-UI的响应性用户界面(如隐藏、网格、断点)的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如何在Material-UI中测试响应元素?
示例:
import React from "react";
import Hidden from "@material-ui/core/Hidden";
const HideOnMobile = (props) => {
return <Hidden xsDown>{props.children}</Hidden>;
};
测试用例:
describe(HideOnMobile, () => {
describe("when screensize is sm", () => {
it("shows children", () => {});
});
describe("when screensize is xs", () => {
it("hides children", () => {});
});
});
推荐答案
MUI v5
遗憾的是,v4 solution doesn't work for v5。
MUI v4
如前所述here您可以使用主题道具设置MUI的大小属性:
import { createMuiTheme, MuiThemeProvider } from "@material-ui/core/styles";
const SizeWrapper = (props) => {
const theme = createMuiTheme({
props: { MuiWithWidth: { initialWidth: "sm" } },
});
return <MuiThemeProvider theme={theme}>{props.children}</MuiThemeProvider>;
};
例如使用Reaction测试库:
describe(HideOnMobile, () => {
describe("when screensize is sm", () => {
it("shows children", () => {
const testMessage = "Test Message";
render(<HideOnMobile>{testMessage}</HideOnMobile>, { wrapper: SizeWrapper });
expect(screen.getByText(testMessage)).toBeInTheDocument();
});
});
});
这篇关于如何在与酶反应或反应测试库中测试材料-UI的响应性用户界面(如隐藏、网格、断点)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文