Модульное тестирование компонента, использующего другие компоненты (упаковка) - PullRequest
Новая
       38

Модульное тестирование компонента, использующего другие компоненты (упаковка)

2 голосов
/ 13 февраля 2020

Я не смог найти ответы на свой вопрос, и я не уверен, что это так, потому что раньше никто не боролся с ним? Или моя формулировка неверна. Итак, я здесь.

Допустим, у нас есть компонент Dialog, который выглядит следующим образом (некоторые части были упущены для простоты): 

import React from 'react';
import Modal from './Modal';

export default class Dialog extends React.Component {
  render() {
    const { children, dialogCss, ...modalProps } = this.props;

    return (
      <Modal role="dialog" {...modalProps}>
        <div>
          <div dialogCss={dialogCss}>{children}</div>
        </div>
      </Modal>
    );
  }
}

Как видно из кода, Dialog компонент использует Modal компонент под капотом.

Как мне подойти к модульному тестированию?

  • Должен ли я тестировать модуль Только функции Dialog c (что только css)?
  • Должен ли я выполнить модульный тест спецификаций Dialog c функциональность И функциональные возможности через Dialog?

Например, у Modal есть логическая опора с именем open, которая отрисовывает или не отображает компонент. Я уже тестировал Modal, и в этом тесте Modal я проверяю, что open prop, установленный в false или true, соблюдается.

Диалог также использует open, нужно ли мне проверять, что "Dialog" также соблюдает open реквизит имеет значение false или true?

Вот как он сейчас тестируется и тестирует функциональность Dialog c ТОЛЬКО потому, что я рассуждаю так: даже если Dialog использует Modal под капотом, так как сам Modal был протестирован, он будет избыточно, чтобы снова проверить его через диалог. Пожалуйста, исправьте меня, если я ошибаюсь. 

import React from 'react';
import Dialog from './Dialog';

const testCss = {
  'background-color': '#fff',
  color: '#000',
};

test('respects dialogCss prop', () => {
  const { getByTestId } = render(
    <Dialog open={true} dialogCss={() => testCss}>
      <div>hello</div>
    </Dialog>
  );

  expect(getByTestId('dialogbox')).toHaveStyle({ ...testCss });
});

test('renders children', () => {
  const { getByTestId } = render(
    <Dialog open={true}>
      <div data-testid="test">hello</div>
    </Dialog>
  );

  expect(getByTestId('test')).not.toBeNull();
});

И вот спор: кто-то сказал your dialog is still a dialog and you'd expect anything that depends on it to not break, что означает, что мы ДОЛЖНЫ проверять, что Модал работает через диалог. Это означает, что Dialog должен проверить, что open соблюдается, даже если сам Модал тестирует его.

Две противоположные мысли, и мы все новички в тестировании внешнего интерфейса. Любая помощь приветствуется!

Спасибо за ваше время и помощь!

...