Тестирование с реакцией на шутку и фермент, когда асинхронный компонентDidMount

реагируют: 16.3.0-alpha.1
jest: "22.3.0"
фермент: 3,3
машинопись: 2.7.1

код:

class Foo extends React.PureComponent<undefined,undefined>{
   bar:number;
   async componentDidMount() {
     this.bar = 0;
     let echarts = await import('echarts'); // async import
     this.bar = 100;
   }
}

тестовое задание:

describe('...', () => {
  test('...', async () => {
    const wrapper = shallow(<Foo/>);
    const instance = await wrapper.instance();
    expect(instance.bar).toBe(100);
  });
});

Ошибка:

Expected value to be:
  100
Received:
  0

Ответы

Ответ 1

Решение:

1: используйте синтаксис async/wait.

2: Используйте mount (неглубоко).

3: ожидание async componentLifecycle.

Например:

    test(' ',async () => {
      const wrapper = mount(
         <Foo />
      );
      await wrapper.instance().componentDidMount();
    })

Ответ 2

Что-то вроде этого должно работать на вас:

 describe('...', () => {
   test('...', async () => {
     const wrapper = await mount(<Foo/>);
     expect(wrapper.instance().bar).toBe(100);
   });
 });

Ответ 3

Попробуй это:

it('should do something', async function() {
  const wrapper = shallow(<Foo />);
  await wrapper.instance().componentDidMount();
  app.update();
  expect(wrapper.instance().bar).toBe(100);
});

Ответ 4

Ваш тест также необходимо реализовать async, ждут.
Например:

  it('should do something', async function() {
    const wrapper = shallow(<Foo />);
    const result = await wrapper.instance();
    expect(result.bar).toBe(100);
  });

Ответ 5

Ни одно из предложенных здесь решений не устранило все мои проблемы. В конце я нашел https://medium.com/@lucksp_22012/jest-enzyme-react-testing-with-async-componentdidmount-7c4c99e77d2d, который исправил мои проблемы.

Резюме

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

it('should do someting', async () => {
    const wrapper = await mount(<Foo/>);
    await flushPromises();

    expect(wrapper.instance().bar).toBe(100);
});