Проверка PropTypes в React + Karma

В Codecademy мы используем Karma + Jasmine для тестирования нашей кодовой базы React. Мы также используем PropTypes, чтобы задокументировать, какие свойства ожидает каждый компонент React.

Проблема: на самом деле мы не проверяли типы PropTypes, поэтому, несмотря на то, что мы старались поддерживать их в чистоте, предупреждения продолжали появляться:

PropTypes важны. Они являются частью того, как мы документируем наш код, а отсутствующие или недействительные реквизиты часто являются признаком скрытых ошибок.

Мы используем CircleCI для запуска наших тестов и отображения этой информации в Github. Если бы мы могли включить проверку свойств в наш набор тестов, это было бы идеально. Но похоже, что React не предоставляет никаких тестовых утилит для проверки свойств ...

Это не особенно элегантно, но наш подход шпионит за console.warn и ищет правильно отформатированные операторы журнала.

//react_warnings.js
export default {
  watchConsole() {
    spyOn(console, ‘warn’);
  },
  propWarnings() {
    let propWarnings = console.warn.calls.all().filter((c) => {
      return (c.args &&
      c.args.length > 0 &&
      /(Invalid prop|Failed propType)/.test(c.args[0]));
    });
    return propWarnings;
  }
}

Тогда тест может выглядеть примерно так:

import ReactWarnings from ‘test_helpers/react_warnings’;
describe('MyComponent', () => {
  beforeEach(ReactWarnings.watchConsole);
  it('renders without propWarnings', () => {
    TestUtils.renderIntoDocument(
      <MyComponent someProp="whatever"/>
    );
  });
  afterEach(() => {
    expect(ReactWarnings.propWarnings().length).toBe(0);
  });
});

Обратите внимание, что вы должны вызвать watchConsole перед рендерингом компонента, если вы хотите перехватывать предупреждения, связанные с рендерингом.

Короче говоря, это просто, и у нас это работает.

Если у вас есть другой подход к проверке PropTypes в React, я бы хотел это услышать!