Как добраться до конца анимации с помощью React Jest - PullRequest
Новая
       11

Как добраться до конца анимации с помощью React Jest

0 голосов
/ 16 мая 2018

Я пытаюсь протестировать компонент, который меняет состояние после анимации 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");
    })
})

1 Ответ

0 голосов
/ 16 мая 2018

Копаясь в документации Jest Я обнаружил, что вы можете указать параметр done, который заставит тест ждать, пока не будет вызван done().

Таким образом, можно установить время ожидания и дождаться завершения анимации.

См. Документация обратного вызова Jest 

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