React bootstrap Nabar.Offcanvas导致Jest/测试库测试错误

Question

我正在使用一个用于响应导航菜单的navbar.offcanvas元素。我刚刚运行了测试，当我注释掉navbar.offcanvas元素时，测试就通过了。我正在使用React Bootstrap、Jest和测试库/rect。

当我将元素留在中并运行测试时，我得到以下内容：

TypeError: targetWindow.matchMedia is not a function
56 | test("Try to render element", () => {
57 |   // Arrange
> 58 |   render(<TodoList />);
|   ^

我不知道为什么会发生这种情况。

这是导航栏。画布外

<Navbar.Offcanvas
id={`offcanvasNavbar-expand-md`}
aria-labelledby={`offcanvasNavbarLabel-expand-md`}
placement="start"
>
<Offcanvas.Header closeButton>
<Offcanvas.Title id={`offcanvasNavbarLabel-expand-md`}>
Navigation
</Offcanvas.Title>
</Offcanvas.Header>
<Offcanvas.Body>
<Nav>
{pages.map((page) => {
return (
<Nav.Item key={page.path}>
<Nav.Link
href={page.path}
eventKey={page.path}
onSelect={(k) => setKey(k)}
className="layout-nav-link"
>
{page.name}
</Nav.Link>
</Nav.Item>
);
})}
</Nav>
</Offcanvas.Body>
</Navbar.Offcanvas>

以下是测试

test("Renders TodoList", () => {
render(<TodoList />);
const todoList = screen.getByText("Todo List");
expect(todoList).toHaveTextContent("Todo List");
});
test("Type into TodoList input box", () => {
// Arrange
render(<TodoList />);
const todoListInput = screen.getByLabelText("TodoId");
console.log(todoListInput);
// Act
fireEvent.change(todoListInput, {
target: { value: "Run" },
});
// Assert
expect(todoListInput.value).toBe("Run");
// Act
fireEvent.change(todoListInput, {
target: { value: "" },
});
// Assert
expect(todoListInput.value).toBe("");
});

如果您需要任何其他信息，请告诉我。谢谢

Answer 1

注意：我还不熟悉使用Jest，所以这可能不是解决问题的推荐方法。考虑到我的知识有限，这是我唯一能想到的解决办法。

在每次测试中，我都会在我安排的部分中添加以下内容，这些内容会导致问题：

Object.defineProperty(window, 'matchMedia', {
writable: true,
value: jest.fn().mockImplementation(query => ({
matches: false,
media: query,
onchange: null,
addListener: jest.fn(), // deprecated
removeListener: jest.fn(), // deprecated
addEventListener: jest.fn(),
removeEventListener: jest.fn(),
dispatchEvent: jest.fn(),
})),
});

所以它看起来像：

test("Renders TodoList", () => {
Object.defineProperty(window, 'matchMedia', {
writable: true,
value: jest.fn().mockImplementation(query => ({
matches: false,
media: query,
onchange: null,
addListener: jest.fn(), // deprecated
removeListener: jest.fn(), // deprecated
addEventListener: jest.fn(),
removeEventListener: jest.fn(),
dispatchEvent: jest.fn(),
})),
});
render(<TodoList />);
const todoList = screen.getByText("Todo List");
expect(todoList).toHaveTextContent("Todo List");
});

本质上，我有一个来自React Bootstrap的方法，它在某个地方使用matchMedia，但由于JSDOM没有实现它(Jest使用JSDOM(，我需要模拟它。现在我的测试很高兴。。。目前。希望这能有所帮助。

参考：https://jestjs.io/docs/manual-mocks#mocking-jsdom 中未实现的方法