React-bootstrap Nabar.Offcanvas 导致 Jest/testing-library 测试出错答案

【问题标题】：React-bootstrap Nabar.Offcanvas causing errors with Jest/testing-library testsReact-bootstrap Nabar.Offcanvas 导致 Jest/testing-library 测试出错
【发布时间】：2022-10-01 01:06:33
【问题描述】：

我正在为响应式导航菜单使用 navbar.offcanvas 元素。我刚刚运行了我的测试，当我注释掉 navbar.offcanvas 元素时它通过了。我正在使用 React-Bootstrap、Jest 和 testing-library/react。

当我离开元素并运行测试时，我得到以下信息：

    TypeError: targetWindow.matchMedia is not a function

      56 | test(\"Try to render element\", () => {
      57 |   // Arrange
    > 58 |   render(<TodoList />);
         |   ^

我不确定为什么会发生这种情况。

这是 Navbar.Offcanvas

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

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

标签： reactjs jestjs react-bootstrap react-testing-library testing-library

【解决方案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-methods-which-are-not-implemented-in-jsdom

【讨论】：