Jest快照测试报错：Cannot read properties of null (reading 'scrollWidth')

我正在为基于Antd Select等组件构建的应用组件编写快照测试，运行时出现如下错误：

测试代码 #

import React from 'react'
import renderer from 'react-test-renderer'
import { render,screen } from '@testing-library/react'

// 注意：此处members变量未定义，需补充
const MockTeamManagerBlock = () => {
  return (
    <TeamManagerBlock
      displayName="editor"
      members={members}
      onAdd={jest.fn()}
      onRemove={jest.fn()}
      onRowSelectionChange={jest.fn()}
      onSearch={jest.fn()}
      teamId="teamId"
    />
  )
}

describe('TeamManagerBlock', () => {
  it('matches snapshot', () => {
    const teamManagerBlockComponent = renderer
      .create(<MockTeamManagerBlock />)
      .toJSON()

    expect(teamManagerBlockComponent).toMatchSnapshot()
  })
})

package.json依赖配置 #

{
  "dependencies": {
    "@ant-design/icons": "^4.6.2",
    "@apollo/client": "^3.6.8",
    "antd": "^5.1.0",
    "lodash": "^4.17.21",
    "prop-types": "^15.7.2",
    "react": "^17.0.2",
    "react-router-dom": "^5.2.0",
    "styled-components": "^5.3.0"
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^12.1.5",
    "babel-jest": "^29.3.1",
    "faker": "^5.5.3",
    "jest": "^29.3.1",
    "jest-axe": "^7.0.0",
    "jest-environment-jsdom": "^29.3.1",
    "react-test-renderer": "17.0.2"
  }
}

报错原因及解决方法 #

原因 #

报错提示window.matchMedia is not a function，是因为Jest默认的JSDOM测试环境未实现matchMedia API，而Antd 5组件内部依赖了这个API。

解决步骤 #

1. 全局Mock matchMedia
   在Jest的全局配置文件（如jest.setup.js）中添加以下代码：

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

   然后在jest.config.js中指定该文件：

   module.exports = {
     // 其他配置项
     setupFilesAfterEnv: ['./jest.setup.js'],
     testEnvironment: 'jsdom'
   };
   

2. 补充测试数据
   当前测试代码中members变量未定义，需补充模拟数据，比如：

   const members = [
     { id: '1', name: '测试用户1' },
     { id: '2', name: '测试用户2' }
   ];
   

3. 版本一致性检查
   确认react-test-renderer版本与react版本一致（当前均为17.0.2），避免版本不兼容问题。

内容的提问来源于stack exchange，提问作者Vignesh s