Question

我编写了触发React警告的测试

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

我知道为什么会有这个警告，但是我需要测试这种情况。但是我不想在运行测试时看到警告。

我该如何编写一个隐藏该消息的模拟程序，或者甚至让我监视它，以便可以看到它？

我正在使用React和Jest

Answer 1

警告消息由console.error记录下来，因此您可以将console.error替换为spy并检查是否已用预期的警告调用了该消息：

import * as React from 'react';
import { shallow } from 'enzyme';

const List = () => (
  <ul>
    {[1, 2, 3].map((val) => (<li>item {val}</li>))}
  </ul>
);

describe('console.error check', () => {

  let savedError;

  beforeEach(() => {
    savedError = console.error;  // save the real console.error
    console.error = jest.fn();  // replace it with a spy
  });

  afterEach(() => {
    console.error = savedError;  // restore the real console.error
  });

  it('should call console.error with the warning', () => {
    shallow(<List />);
    expect(console.error).toHaveBeenCalled();  // SUCCESS
    expect(console.error.mock.calls[0][0].startsWith('Warning: Each child in a list should have a unique "key" prop.')).toBe(true);  // SUCCESS
  });
})

模拟开玩笑：警告：列表中的每个孩子都应该有一个唯一的“关键”道具

1 个答案: