Question

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

问题是 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);
    })
})

如何使用React Jest

组件

测试（基本结构）

1 个答案: