如何测试发生反应具有的CSS过渡组件？

下面是两种方法，我用改变弹出包装的状态。如何测试发生反应具有的CSS过渡组件？

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转换的样式化组件。我想测试我正在状态只开放为打开状态的过渡已经完成之后才到来的组件。我使用的玩笑快照测试。同时用开玩笑编写测试用例的任何一个面对此类问题的？请帮忙。

来源

2017-10-20 suyesh

可以模拟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); 
});

此外，您可能要正确添加转换事件的组件：

(as a functional component for brevity) 
const Component =() => 
    <div onTransitionEnd={this.handleTransitionEnd} onClick={this.startStatusTransition} />

来源

2017-12-28 15:00:08

如何测试发生反应具有的CSS过渡组件？

回答

相关问题