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

如何测试具有css过渡的反应组分？

1 个答案: