Тестирование

Именование тестовых файлов

Создайте тестовые файлы с шаблоном имени {имя компонента}.test.js в том же каталоге, который содержит {имя компонента}.js.

Обновление снимков

Когда вы изменяете компонент таким образом, что это влияет на разметку, вам потребуется обновить снимок, чтобы тесты прошли успешно. Для этого выполните команду yarn run test-unit -u. Это обновит все снимки в репозитории. Вы также можете добавить любую строку в конец команды, чтобы запустить тесты только в каталогах, содержащих эту строку. Например, yarn run test-unit -u button обновит тесты только для каталогов, которые содержат button.

Тестовые помощники

Модуль src/test экспортирует некоторые функции и константы, которые помогут вам писать более качественные тесты:

• findTestSubject помогает находить узлы DOM в смонтированных компонентах.
• requiredProps — это список всех свойств, которые почти все компоненты должны поддерживать.
• takeMountedSnapshot генерирует снимок смонтированного компонента.

Дизайн тестов

Что можно и что нельзя делать

• Можно использовать атрибут data-test-subj, чтобы пометить части компонента, которые вы хотите найти позже.
• По возможности не следует полагаться на имена классов или другие детали реализации для поиска узлов.
• Следует как можно чаще использовать снимки.
• Не следует утверждать о наличии узлов, если вместо этого можно использовать снимок.

Анатомия теста

Хороший тест должен документировать:

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

describe('YourComponent', () => {
  test('is rendered', () => {
    const component = render(
      <YourComponent {...requiredProps}>
        Hello
      </YourComponent>
    );

    expect(component)
      .toMatchSnapshot();
  });

  describe('props', () => {
    describe('color', () => {
      test('is rendered', () => {
        const component = render(
          <YourComponent color="blue" />
        );

        expect(component)
          .toMatchSnapshot();
      });
    });

    describe('onClick', () => {
      test(`isn't called upon instantiation`, () => {
        const onClickHandler = sinon.stub();

        mount(
          <YourComponent onClick={onClickHandler} />
        );

        sinon.assert.notCalled(onClickHandler);
      });

      test('is called when the button is clicked', () => {
        const onClickHandler = sinon.stub();

        const component = mount(
          <YourComponent onClick={onClickHandler} />
        );

        // NOTE: This is the only way to find this button.
        component.find('button').simulate('click');

        sinon.assert.calledOnce(onClickHandler);
      });
    });
  });

  describe('behavior', () => {
    it('button is automatically focused', () => {
      const component = mount(
        <YourComponent />
      );

      expect(findTestSubject(component, 'button').getDOMNode()).toBe(document.activeElement);
    });
  });
});

Написание файлов фиктивных компонентов

Файл компонента можно смоделировать для упрощения создания снимков или для устранения недетерминированного рендеринга в тестовых средах. Пример см. в src/components/icon.

Хотя файлы фиктивных компонентов в настоящее время используются только как часть тестовых сред потребляющих проектов, эта концепция скоро будет применена к собственной тестовой среде EUI.

Использование пространства имён mock

Мокинг компонентов опирается на использование пространства имён [name].testenv.* для идентификации. Мокированный модуль заменит стандартный импорт в сборке test-env. Можно смоделировать как файлы index, так и отдельные файлы компонентов.

Сопоставление всех экспортных модулей

Визуализированный вывод смоделированного компонента остаётся на усмотрение автора, однако все публичные экспортные данные модуля должны быть сохранены в файле-макете. Обратите внимание, что это не относится к экспортируемым типам TypeScript и интерфейсам, которые всегда будут производными от исходного файла компонента.