时间戳

首页 > 解决方案 > 如何从不直接处理状态管理的 reactstrap 为 UncontrolledTooltip 创建一个单元测试？

reactjs - 如何从不直接处理状态管理的 reactstrap 为 UncontrolledTooltip 创建一个单元测试？

问题描述

我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);
  });
});

标签： reactjsjestjsenzymereactstrap

解决方案

有几件重要的事情可以开始：

  1. UncontrolledTooltip是 3rd 方包的一部分，所以你不会明确地测试它。相反，您最好专注于测试您的包装器UncontrolledTooltip。
  2. simulate与事件浏览器的系统无关。这只是一个语法糖props().onHover(...)。因此，如果目标组件有这样的道具——它是一个回调函数——它将被调用。如果没有这样的道具 - 这将取决于发生了defaultProps什么。无论如何，没有什么比“在元素上模拟鼠标光标”。
  3. shallow()将在级别停止渲染UncontrolledTooltip（其内部将不会被渲染）

牢记这一点，我认为您只能：

  1. 您的组件最终UncontrolledTooltip以预期的常量 prop 值呈现

  2. 和propsmetaData都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);
});

推荐阅读