超时后反应测试状态变化

Question

假设我有一个 Card 元素，点击时会翻转。 2秒后，它必须自动翻转回来。在 CSS 术语中，点击后变换样式设置为 rotateY(180deg)，2 秒后应变为 Initial

我想为此后空翻编写单元测试（目前测试通过，即使我希望 transform 属性等于初始值）：

it( 'flips', () => {
        const testedCard = shallow( <Card /> )
        testedCard.setState( { faceUp: true } )

        setTimeout(
            () => {
                const cardFlipper = testedCard.node.props.children
                expect( cardFlipper.props.transform ).to.equal( 'initdasddaial' )
            },
            2500
        );
    } )

Answer 1

如果您使用的是mocha 或jasmine，则可以在it 中传递done 回调：

it( 'flips', (done) => {
        const testedCard = shallow( <Card /> )
        testedCard.setState( { faceUp: true } )

        setTimeout(
            () => {
                const cardFlipper = testedCard.node.props.children
                expect( cardFlipper.props.transform ).to.equal( 'initdasddaial' )
                done();
            },
            2500
        );
    } )

但是，根据您的测试运行器（设置），done 超时可能会发生在 2500 磨机之前。您可能需要配置不同的超时值。

附带说明，基于时间的单元测试通常不是一个好主意。考虑设计组件，以便您可以更确定地进行测试。