Как создать модульный тест для UncontrolledTooltip из responsestrap, который не обрабатывает управление состоянием напрямую? - PullRequest
Новая
       14

Как создать модульный тест для UncontrolledTooltip из responsestrap, который не обрабатывает управление состоянием напрямую?

0 голосов
/ 20 мая 2019

Я реализовал простой UncontrolledTooltip из reactstrap.Документ (https://reactstrap.github.io/components/tooltips/) говорит, что

неконтролируемый компонент может обеспечить требуемую функциональность без необходимости управлять / контролировать состояние компонента

Если я хочуреализовать модульный тест (например, jest + enzyme) для проверки его состояния как открытого или закрытого, как я могу создать модульный тест без ручного изменения значения состояния? Возможно ли это достичь? Кажется, это возможно только при обычном Tooltip компонент, но я хотел бы услышать совет от опытных инженеров.

[Обновление]:

По запросу я включаю сюда всплывающую подсказку и юнит-тест, который я пытаюсь выполнить. В настоящее время я хочусмоделируйте hover на всплывающей подсказке, однако mockHover.mock.calls.length вернет значение 0, которое я интерпретирую, поскольку фиктивная функция не сработала.

Вот моя подсказка. 

import React from 'react';
import { UncontrolledTooltip } from 'reactstrap';    

export default class MyTooltip extends React.Component {
  render() {
    const { metaData, wg } = this.props;
    return (
      <div>
        <UncontrolledTooltip placement="bottom" trigger={'hover'} target={wg}>
          {metaData}
        </UncontrolledTooltip>
      </div>
    );
  }
}

Вот мой блоктест, который использует jest and enzyme: 

describe('<MyTooltip />', () => {
  it('Tooltip unit test', () => {    
    const mockHover = jest.fn();
    const wrapper = shallow(<MyTooltip trigger={mockHover} />);
    expect(wrapper.find(UncontrolledTooltip));
    wrapper.find(UncontrolledTooltip).simulate('hover');
    expect(mockHover.mock.calls.length).toEqual(1);
  });
});

1 Ответ

1 голос
/ 21 мая 2019

Есть несколько важных вещей, с которых нужно начинать:

  1. UncontrolledTooltip является частью стороннего пакета, поэтому вы не будете тестировать его явно.Вместо этого вам лучше сконцентрироваться на тестировании вашей обертки вокруг UncontrolledTooltip.
  2. simulate - это никак не связано с системой браузера событий.Это просто синтаксический сахар, чтобы сделать props().onHover(...).Так что, если целевой компонент имеет такую ​​опору - и это функция обратного вызова - он будет вызван.Если такой опоры нет - это будет до defaultProps того, что происходит.В любом случае, ничего подобного «эмуляции курсора мыши над элементом».
  3. shallow() остановит рендеринг на уровне UncontrolledTooltip (его внутренние компоненты не будут отрисованы)

Сохранение этого вНе забывайте, что вы можете только:

  1. ваш компонент, наконец, рендерит UncontrolledTooltip с ожидаемыми постоянными значениями реквизита

  2. оба metaData и wg реквизита передаются вUncontrolledTooltip

    it('renders UncontrolledTooltips under the hood', () => {
  const wg = '1';
  const metaData = (<span>2</span>);
  const wrapper = shallow(<MyTooltip wg={wg} metaData={metaData} />);
  const innerTooltip = wrapper.find(UncontrolledTooltip);
  /* 
  I don't validate `find(UncontrolledTooltip).toHaveLength(1)`
  since assertion on `.find(..).props()` would throw exception otherwise
  */ 
  expect(innerTooltip.props().placement).toEqual('bottom');
  expect(innerTooltip.props().trigger).toEqual('hover');
  expect(innerTooltip.props().wg).toEqual(wg);
  expect(innerTooltip.props().metaData).toEqual(metaData);
});
...