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

Question

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

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

我也尝试过 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 callbacks documentation

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