如何使用 React Jest 时间旅行到动画结束

Question

我正在尝试测试一个在 TweenMax 动画之后更改 state 的组件。浏览器上一切正常，但我无法理解如何为其编写测试。

问题是 Jest 不会等待动画完成，因此 state 不会改变。

我还尝试了 jest.runAllTicks() 和 jest.runAllTimers()

这里有一些代码最终会模拟我正在做的事情：

组件

class HelloWorld extends React.Component {
    constructor(props) {
        super(props);
        this.state = { done: false };
        this.p;
    }

    componentDiDMount() {
        TweenMax.to(ReactDOM.findDOMNOde(this.p), 1, { 
            onComplete: () => {
                this.setState({ done: true })
            }
        })
    }

    renderMessage() {
        if (this.state.done) {
            return "Hello World";
        } else {
            return "Loading...";
        }
    }

    render () {
        return <p ref={p => this.p = p}>{this.renderMessage()}</p>;
    }       
}

测试（基本结构）

describe("test",()=>{
    it("works", ()=>{
        const component = mount(<HelloWorld />);
        // ...wait some time (or pretend to)
        expect(component.find(p).text()).toEqual("Hello World");
    })
})

Answer 1

深入研究 Jest 文档，我发现您可以指定一个

done

参数，该参数将强制测试等到

done()

被调用。

这样就可以设置超时并等待动画完成。

请参阅 Jest 回调文档

describe("test",() => {
    it("works", done => {
        const component = mount(<HelloWorld />);
        setTimeout(() => {
            expect(component.find(p).text()).toEqual("Hello World");
            done();
        }, 1100);
    })
})

Answer 2

实际上你可以通过以下方式触发它：

const element = document.getElementById('yourElement');
fireEvent.animationEnd(element);