我有两个按钮显示的基础上,屏幕大小(为中等屏幕一个按钮和另一个按钮为其他屏幕)。我使用Material UI的MediaQuery和theme.breakpoints来定义屏幕大小。
这是我的UI代码,我在React中使用了 *Typescript *。
import React from "react";
import Button from "@material-ui/core/Button";
import useMediaQuery from "@material-ui/core/useMediaQuery";
import { useTheme } from "@material-ui/core/styles";
export default function SimpleCard() {
const theme = useTheme();
const isMd = useMediaQuery(theme.breakpoints.only("md"));
return (
<div>
{isMd ? (
<Button
data-testid="mediumScreenButton"
onClick={() => console.log("medium")}
>
medium screen
</Button>
) : (
<Button
data-testid="otherScreenButton"
onClick={() => console.log("other")}
>
Other screen
</Button>
)}
</div>
);
}
这是我的测试代码
import React from 'react';
import { render, fireEvent, screen, waitFor, cleanup } from '@testing-library/react';
import Demo from './Demo'
beforeEach(() =>
{
window.scrollTo = jest.fn();
window.HTMLDivElement.prototype.scrollIntoView = jest.fn();
// window.matchMedia('(max-width: 999px)');
});
describe('To test cond. for screen sizes', () =>
{
afterEach(cleanup);
it('Medium screen', async () =>
{
const { container } = render(<Demo />)
const mediumScreenButton = screen.getByTestId('mediumScreenButton');
fireEvent.click(mediumScreenButton);
expect(container).toMatchSnapshot();
});
});
我不明白如何在我的测试文件中将屏幕大小设置为中等,这样我的测试用例就可以通过。但是现在,测试用例失败了,因为“无法找到带有数据testidmediumScreenButton的元素”。有人能帮我解决这个问题吗?
谢谢你。
2条答案
按热度按时间kyks70gy1#
Mui文档有一些关于如何做到这一点的例子。
您需要在测试环境中实现matchMedia。
例如,jsdom还不支持它。你应该用polyfill填充。建议使用
css-mediaquery
来模拟它。首先安装
css-mediaquery
:你的测试可能是:
避免使用
getByTestId
查找testing-library
元素。在自己的文档中有一个查询优先级的建议,大家可以在这里查看。因此,在本例中,您可以使用getByRole('button')
6xfqseft2#
我在项目中使用Typescript。下面的代码是为我工作。感谢@Luis的提示。
安装
css-mediaquery
在测试文件中添加此函数
最后把这个放在你的测试用例中(it)
总体测试代码为