测试 Table 组件 Ant-Design

Question

我正在尝试测试 ant-design Table 组件，但我遇到了一个谜。目前，我的测试正在运行；我可以在文档中找到名字“Mike”。但是，一旦我取消注释列中的响应字段：['lg']，测试就会失败，并且名字“Mike”不会出现。

这是我的代码。

import React from 'react';
import { render } from '@testing-library/react';
import { Table } from 'antd';

it('render correctly name', () => {
  const dataSource = [
    {
      key: '1',
      name: 'Mike',
      age: 32,
      address: '10 Downing Street',
    },
    {
      key: '2',
      name: 'John',
      age: 42,
      address: '10 Downing Street',
    },
  ];

  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
    //   responsive: ['lg'], //HERE
    },
    {
      title: 'Age',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: 'Address',
      dataIndex: 'address',
      key: 'address',
    },
  ];
  const { getByText } = render(
    <Table data={dataSource} columns={columns} />,
  );

  expect(getByText('Mike')).toBeInTheDocument();
});

我尝试更改对 xs、md 的响应... 我还尝试在测试之前设置 window.width，但似乎没有任何效果。一旦我删除该行，测试就可以进行。我觉得很疯狂！

非常感谢！

Answer 1

根本原因是jsdom还不支持

window.mediaQuery

。你应该填充它。建议使用

css-mediaquery

进行模拟。

例如

import React from 'react';
import { render } from '@testing-library/react';
import '@testing-library/jest-dom';
import { Table, theme } from 'antd';
import { ColumnType } from 'antd/es/table';
import mediaQuery from 'css-mediaquery';

function createMatchMedia(width: string) {
  return (query: string) => ({
    matches: mediaQuery.match(query, {
      width,
    }),
    onchange: null,
    addListener: jest.fn(),
    removeListener: jest.fn(),
    addEventListener: jest.fn(),
    removeEventListener: jest.fn(),
    dispatchEvent: jest.fn(),
  });
}

it('render correctly name', () => {
  (window as any).matchMedia = createMatchMedia(theme.getDesignToken().screenLG + 'px');

  const dataSource = [
    {
      key: '1',
      name: 'Mike',
      age: 32,
      address: '10 Downing Street',
    },
    {
      key: '2',
      name: 'John',
      age: 42,
      address: '10 Downing Street',
    },
  ];

  const columns: ColumnType<any>[] = [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
      responsive: ['lg'],
    },
    {
      title: 'Age',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: 'Address',
      dataIndex: 'address',
      key: 'address',
    },
  ];
  const { getByText } = render(<Table dataSource={dataSource} columns={columns} />);

  expect(getByText('Mike')).toBeInTheDocument();
});

测试结果：

 PASS  stackoverflow/78034643/index.test.tsx
  √ render correctly name (198 ms)
                                                                                                                                                                                    
Test Suites: 1 passed, 1 total                                                                                                                                                      
Tests:       1 passed, 1 total                                                                                                                                                      
Snapshots:   0 total
Time:        2.261 s
Ran all test suites related to changed files.

封装版本：

"@testing-library/jest-dom": "^6.1.4",
"@testing-library/react": "^14.1.2",
"jest": "^29.7.0",
"antd": "^5.14.2",
"css-mediaquery": "^0.1.2",
"@types/css-mediaquery": "^0.1.4",