如何测试具有 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快照测试。有没有人在使用jest编写测试用例时遇到过这种问题？请帮忙。

- suyesh

Answer 1

您可以像处理其他React事件一样模拟transitionEnd事件。

如果您使用Enzyme，代码可能如下所示：

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} />

- Gregg B