web-dev-qa-db-fra.com

Test avec Jest et Enzyme de React lorsque composant async

  • réagir: 16.3.0-alpha.1
  • plaisanterie: "22.3.0"
  • enzyme: 3.3.0
  • TypeScript: 2.7.1

code:

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

tester:

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

Erreur:

Expected value to be:
  100
Received:
  0
reactjstypescriptenzymejest
4
Whj

Solution:

1: utilisez la syntaxe async/wait.

2: Utilisez la monture (pas peu profonde).

3: attendez le cycle de vie du composant async.

Pour ex: 

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

Quelque chose comme ça devrait marcher pour vous: -

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

Essaye ça:

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

Votre test doit également implémenter async, attendez.
Par exemple:

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