Издевательство в шутку: Предупреждение: У каждого дочернего элемента в списке должен быть уникальный «ключевой» реквизит

#reactjs #mocking #jestjs

#reactjs #издевательство #jestjs

Вопрос:

Я написал тесты, которые вызывают React предупреждение

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

Я знаю, почему это предупреждение существует, но мне нужно протестировать для этого случая. Но я не хочу видеть предупреждение при запуске своих тестов.

Как я могу написать макет, который скрывает это сообщение или даже позволяет мне шпионить за ним, чтобы я мог видеть, что оно там?

Я использую React и Jest

Комментарии:

1. что вы хотите протестировать? ключ узла? wrapper.findWhere(node => node.key() === 'foo');

2. Нет, я пишу загрузчик webpack, который вызовет это предупреждение, и я не хочу видеть его в консоли моих тестов

Ответ №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. Я уже делал это, издевательство console.error , к сожалению, не сработало

2. @Lukas Какую версию React и Jest вы используете? (В моей среде это работает так, как ожидалось)