Jest ждать обещание решить, прежде чем найти элемент - PullRequest
Новая
       21

Jest ждать обещание решить, прежде чем найти элемент

0 голосов
/ 04 апреля 2020

Это мой пример кода React (фактический код очень схож с этим, но он слишком длинен, чтобы его здесь): 

class Test extends Component {  
    state = {
        show: false
    }
    render() {
        return (
        <>
        {this.state.show && <div>Hello</div>}
        <button
            onClick={() => {

                //an ajax call to fetch data from server
                new Promise((resolve) => resolve(null)).then(() => {
                this.setState({show: true})
                })
            }}
        />
        </>
      )
    }
}

Ниже приведен шуточный тест: 

it('test', () => {
    const component = mount(< Test />);
    expect(component.find('div').length).toEqual(0); //passes

    component.find('button').prop<Function>('onClick')();
    expect(component.find('div').length).toEqual(1); //unstable response
})

Теперь проблема, с которой я сталкиваюсь, состоит в том, что когда я запускаю такого рода тесты, где поиск компонента зависит от разрешения обещания, тесты нестабильны. Иногда они проходят, а иногда компонент не обнаруживается.

То, что я пробовал:

1- Использование этой функции сна: 

const sleep = (milliseconds: number) => {
  return new Promise<number>(resolve => setTimeout(resolve, milliseconds));
};

А затем используйте await sleep(1) после запуска обещания

2- Использование этого гриппа sh функция обещаний: 

const flushPromises = () => {
  return new Promise(resolve => setImmediate(resolve));
}

Но я не могу найти необходимую стабильность. Другая причина, которую это вызывает, - если есть цепочечные обещания, то тест (в основном, но не всегда, следовательно, нестабильный) завершается до того, как все обещания будут разрешены (что, очевидно, приводит к сбою тестов). Я пытался увеличить время ожидания (третий аргумент it) и использовал callback, но безрезультатно.

Может кто-нибудь объяснить, что я делаю не так и как работает разрешение обещаний в тесте jest окружающая среда.

1 Ответ

0 голосов
/ 04 апреля 2020

Может быть, вы можете проверить div по-другому. Тест для DOM DIV присутствует или нет, устанавливая состояние. 

  component.setState({ show: true }); 
  expect(component.find("div").length).toEqual(1);
...