如何测试响应式设计？文本隐藏响应式测试失败求助

看起来你遇到的核心问题是JSDom测试环境不会自动根据window.innerWidth的变化应用CSS媒体查询规则——哪怕你手动修改了窗口宽度并触发了resize事件，对应的CSS隐藏规则也不会生效，导致你的.adjectives元素始终保持可见状态，最终让not.toBeVisible()断言失败。

为什么测试会失败？ #

你的组件是纯CSS驱动的响应式设计，依赖媒体查询来切换元素的display属性。但React Testing Library默认使用的JSDom环境，并不会监听window.innerWidth的变化，也不会自动重新计算媒体查询的条件。也就是说，哪怕你修改了window.innerWidth，浏览器（测试环境）并不会“感知”到这个变化，自然不会应用对应的CSS隐藏规则，元素还是保持默认的可见状态。

解决方案 #

这里有两种靠谱的解决方式，你可以根据项目需求选择：

1. 使用jest-matchmedia-mock模拟媒体查询（推荐）

这个库可以帮你在测试中精准模拟不同的媒体查询条件，让CSS规则正确生效，最接近真实浏览器的行为：

首先安装依赖：

npm install jest-matchmedia-mock --save-dev

然后修改你的测试代码：

import React from 'react'
import { render, screen } from '@testing-library/react'
import Welcome from '.'
import matchMediaMock from 'jest-matchmedia-mock';

let mediaMatcher;

// 每个测试前初始化媒体查询mock
beforeEach(() => {
  mediaMatcher = new matchMediaMock();
});

test('renders a responsive title', () => {
  render(<Welcome />);
  
  // 初始宽屏状态：元素都可见
  expect(screen.getByText('Good Old')).toBeVisible();
  expect(screen.getByText('Search')).toBeVisible();
  
  // 模拟屏幕宽度 ≤500px 的情况
  mediaMatcher.setMedia('(max-width: 500px)');
  // 此时.adjectives应该被隐藏
  expect(screen.getByText('Good Old')).not.toBeVisible();
  // .verb依然可见
  expect(screen.getByText('Search')).toBeVisible();
  
  // 模拟屏幕宽度 ≤200px 的情况
  mediaMatcher.setMedia('(max-width: 200px)');
  // 此时.verb也被隐藏
  expect(screen.queryByText('Search')).not.toBeInTheDocument();
});

2. 手动模拟样式变化（适合简单场景）

如果不想额外添加依赖，可以直接在测试中手动修改元素的样式，模拟媒体查询生效后的状态：

import React from 'react'
import { render, screen } from '@testing-library/react'
import Welcome from '.'

test('renders a responsive title', () => {
  const { container } = render(<Welcome />);
  
  // 初始状态：元素可见
  expect(screen.getByText('Good Old')).toBeVisible();
  
  // 模拟max-width:500px的样式：隐藏.adjectives
  const adjectivesEl = container.querySelector('.adjectives');
  adjectivesEl.style.display = 'none';
  expect(screen.getByText('Good Old')).not.toBeVisible();
  
  // 模拟max-width:200px的样式：隐藏.verb
  const verbEl = container.querySelector('.verb');
  verbEl.style.display = 'none';
  expect(screen.queryByText('Search')).not.toBeInTheDocument();
});

额外提示 #

你之前测试中的rerender(<Welcome />)其实是多余的——你的组件没有依赖窗口宽度的props或状态，纯CSS响应式不需要重新渲染组件就能生效，所以rerender不会改变任何东西。

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