reactjs - 如何测试具有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 编写测试用例时遇到过此类问题吗？请帮忙。

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