如何测试具有CSS转换的React组件？

Question

以下是我用来更改弹出包装器状态的两种方法。

const waitTransitionEnd = (element) => new Promise(resolve => {
  const onEnd = () => {
    element.removeEventListener('transitionend', onEnd)
    resolve()
  }
  element.addEventListener('transitionend', onEnd)
})
    doOpen () {
        const dialog = findDOMNode(this.dialog)
        this.setState({ status: OPENING })
        return waitTransitionEnd(dialog).then(() => {
          this.setState({ status: OPENED })
          this.focus()
        })
      }
      doClose () {
        const dialog = findDOMNode(this.dialog)
        this.setState({ status: CLOSING })
        return waitTransitionEnd(dialog).then(() => {
          this.setState({ status: CLOSED })
        })
      }

所以对话框是带有 css 过渡的样式组件。我正在尝试测试我仅获得打开状态的组件，因为打开状态仅在转换完成后才会出现。我正在使用 jest 快照测试。有人在用笑话编写测试用例时遇到过这样的问题吗？请帮忙。

Answer 1

您可以像任何其他 React 事件一样模拟transitionEnd 事件。

如果您使用酶，它看起来像：

test('should do something after transition ends', () => {
    const wrapper = shallow(<Component>Label text</Component>);
    expect(wrapper).toHaveState('status', OPENED);
    wrapper.simulate('transitionEnd');
    expect(wrapper).toHaveState('status', CLOSED);
});

此外，您可能想在组件中添加转换事件：

const Component = () => 
     <div onTransitionEnd={handleTransitionEnd} onClick={startStatusTransition} />