React Test using Ant Design; TypeError: window.matchMedia is not a function

Question

我使用 create react app 创建了一个 React 应用程序。然后我添加了antd。我想做一些测试。我没有遇到 Button、Tittle、DatePicker 的问题。但是当我添加行时，会出现很多错误。

不是一个复杂的项目，只是一个非常简单的测试。我尝试了现有的解决方案，但我无法得到肯定的结果，我仍然得到错误

App.js

import logo from "./logo.svg";
import "./App.css";
import { DatePicker, Row ,Button,Typography} from "antd";
import "antd/dist/antd.min.css";

const {Title}=Typography;

function App() {
  return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
          <DatePicker data-testid="date" />
          <Button data-testid="button">Submit</Button>
          <Title data-testid="title">Ant test title</Title>
          <Row>row</Row>
        </header>
      </div>
  );
}

export default App;

App.test.js

import { render, screen } from '@testing-library/react';
import App from './App';


test('renders learn react link', () => {
  render(<App />);
  const linkElement = screen.getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});
it('date ', () => {
  const { getByTestId } = render(<App />); 
  expect(getByTestId('date')).toBeInTheDocument();
 });
 it('button ', () => {
  const { getByTestId } = render(<App />); 
  expect(getByTestId('button')).toBeInTheDocument();
 });

 it('title ', () => {
  const { getByTestId } = render(<App />); 
  expect(getByTestId('title')).toBeInTheDocument();
 });

Answer 1

尝试将 Col 组件作为 Row 的子组件而不是文本

      <Row>
        <Col span={12}>col-12</Col>
        <Col span={12}>col-12</Col>
      </Row>

就像那样。

    import logo from "./logo.svg";
    import "./App.css";
    import { DatePicker, Row, Col ,Button,Typography} from "antd";
    import "antd/dist/antd.min.css";
    
    const {Title}=Typography;
    
    function App() {
      return (
          <div className="App">
            <header className="App-header">
              <img src={logo} className="App-logo" alt="logo" />
              <p>
                Edit <code>src/App.js</code> and save to reload.
              </p>
              <a
                className="App-link"
                href="https://reactjs.org"
                target="_blank"
                rel="noopener noreferrer"
              >
                Learn React
              </a>
              <DatePicker data-testid="date" />
              <Button data-testid="button">Submit</Button>
              <Title data-testid="title">Ant test title</Title>
              <Row>
                <Col span={12}>col-12</Col>
                <Col span={12}>col-12</Col>
              </Row>
            </header>
          </div>
      );
    }
    
    export default App;

React Test using Ant Design; TypeError: window.matchMedia is not a function

React Test using Ant Design; TypeError: window.matchMedia is not a function

reactjs

jestjs

antd

react-testing-library