测试时捕获React警告：如何用Cypress检测列表key缺失问题

我们来看React文档中的这个示例：

const people = [
  'Creola Katherine Johnson: mathematician',
  'Mario José Molina-Pasquel Henríquez: chemist',
  'Mohammad Abdus Salam: physicist',
  'Percy Lavon Julian: chemist',
  'Subrahmanyan Chandrasekhar: astrophysicist'
];

export default function List() {
  const listItems = people.map(person =>
    <li>{person}</li>
  );
  return <ul>{listItems}</ul>;
}

渲染该组件时，React会在控制台输出以下警告：

Warning: Each child in a list should have a unique "key" prop.

你可以用Cypress或其他工具来确保组件不会触发这类警告，具体方案如下：

一、使用Cypress检测 #

Cypress可以监听浏览器控制台的警告日志，通过捕获window:console事件来判断是否出现目标警告。

测试实现 #

如果是组件测试（Cypress Component Testing），代码示例如下：

it('不会触发React列表key缺失警告', () => {
  // 挂载目标组件
  cy.mount(<List />);

  // 监听控制台警告，断言未出现指定内容
  cy.on('window:console', (log) => {
    expect(log.message).to.not.include('Each child in a list should have a unique "key" prop');
  });
});

如果是E2E测试，只需先访问组件所在页面，再执行上述控制台监听逻辑即可。

二、其他可选工具 #

除了Cypress，还有更前置的检测方式：

• ESLint + eslint-plugin-react：开启react/jsx-key规则，在编码阶段静态检测列表项缺失key的问题，提前规避错误，无需等到运行时。
• Jest + React Testing Library：在单元测试中通过监听控制台警告来断言，示例代码：

import { render } from '@testing-library/react';
import List from './List';

test('不会输出列表key缺失警告', () => {
  const warnSpy = jest.spyOn(console, 'warn').mockImplementation();
  render(<List />);
  expect(warnSpy).not.toHaveBeenCalledWith(expect.stringContaining('Each child in a list should have a unique "key" prop'));
  warnSpy.mockRestore();
});

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