Jest与React Testing Library适配Tailwind时组件可见性测试失败怎么办？

问题详情 #

组件代码（通过Tailwind响应式类控制隐藏）：

<div data-testid="some-component" className="max-lg:hidden flex flex-wrap items-start justify-end gap-6 sm:gap-8 lg:contents"></div>

测试代码：

Object.defineProperty(window, 'innerHeight', {
    writable: true,
    configurable: true,
    value: 300,
});
global.dispatchEvent(new Event('resize'));
expect(window.innerHeight).toBe(300);
expect(screen.getByTestId('some-component')).not.toBeVisible();

问题：窗口高度设置成功，但可见性检查始终失败；其他未使用Tailwind的可见性测试正常，怀疑是Tailwind响应式样式在测试环境未生效，之前配置的Jest moduleNameMapper未解决问题。

解决办法 #

1. 修正视口模拟对象：改高度为宽度 #

Tailwind的响应式断点（如max-lg）是基于视口宽度的，max-lg:hidden表示视口宽度小于1024px时隐藏组件。你之前模拟的是innerHeight，和Tailwind的判断逻辑完全无关，这是核心问题。

修改测试代码，模拟视口宽度：

Object.defineProperty(window, 'innerWidth', {
  writable: true,
  configurable: true,
  value: 800, // 小于lg断点的1024px
});
global.dispatchEvent(new Event('resize'));

// 等待组件响应resize完成渲染
await waitFor(() => {
  expect(screen.getByTestId('some-component')).not.toBeVisible();
});

2. 调整Jest样式处理配置 #

你之前的moduleNameMapper配置冲突且无效，正确的配置应该只保留identity-obj-proxy处理CSS类名，确保Jest不报错即可：

"jest": {
  "moduleNameMapper": {
    "^.+\\.(css|scss|sass)$": "identity-obj-proxy"
  },
  "setupFilesAfterEnv": [
    "@testing-library/jest-dom"
  ]
}

3. 补充ResizeObserver polyfill #

部分组件可能依赖ResizeObserver响应视口变化，需要在测试环境添加polyfill：

1. 安装依赖：

npm install --save-dev resize-observer-polyfill

2. 在Jest的setup文件（如src/setupTests.js）中添加：

import ResizeObserver from 'resize-observer-polyfill';
global.ResizeObserver = ResizeObserver;

4. 直接检查CSS样式作为备选 #

如果可见性判断仍有问题，可以直接检查组件的display属性（Tailwind的hidden类本质是设置display: none）：

const component = screen.getByTestId('some-component');
expect(component).toHaveStyle('display: none');

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