Làm thế nào để đợi cho đến khi thành phần React hoàn tất cập nhật trong Jest và/hoặc Enzyme?

Question

Trong ứng dụng tạo phản ứng của tôi, tôi đang cố thử nghiệm một thành phần thực hiện nhiều lần setState khi được gắn kết.

class MyComponent extends React.Component { 

    state = { 
    a: undefined, 
    b: undefined, 
    c: undefined, 
    }; 

    fetchA() { 
    // returns a promise 
    } 

    fetchB() { 
    // returns a promise 
    } 

    fetchC() { 
    // returns a promise 
    } 

    async componentDidMount() { 
    const a = await fetchA(); 
    this.setState({ a }); 
    } 

    async componentDidUpdate(prevProps, prevState) { 
    if (prevState.a !== this.state.a) { 
     const [b, c] = await Promise.all([ 
     this.fetchB(a); 
     this.fetchC(a); 
     ]); 
     this.setState({ b, c }); 
    } 
    } 

    ... 

} 

Trong thử nghiệm của tôi, tôi làm điều gì đó như thế này, cố gắng để cho các setState trong componentDidUpdate để kết thúc trước khi đưa ra khẳng định.

import { mount } from 'enzyme'; 

describe('MyComponent',() => { 

    const fakeA = Promise.resolve('a'); 
    const fakeB = Promise.resolve('b'); 
    const fakeC = Promise.resolve('c'); 

    MyComponent.prototype.fetchA = jest.fn(() => fakeA); 
    MyComponent.prototype.fetchB = jest.fn(() => fakeB); 
    MyComponent.prototype.fetchC = jest.fn(() => fakeC); 

    it('sets needed state', async() => { 
    const wrapper = mount(<MyComponent />); 
    await Promise.all([ fakeA, fakeB, fakeC ]); 
    expect(wrapper.state()).toEqual({ 
     a: 'a', 
     b: 'b', 
     c: 'c', 
    }); 
    }); 

}); 

Đây là một phần thú vị: thử nghiệm của tôi ở trên sẽ thất bại vì setState cuộc gọi cuối cùng (trong componentDidUpdate) đã không hoàn thành khi khẳng định được thực hiện. Vào thời điểm đó, state.a được đặt, nhưng state.b và state.c chưa được đặt.

Cách duy nhất tôi có thể làm cho nó hoạt động là bằng cách nêm await Promise.resolve(null) ngay trước khi xác nhận để cung cấp dấu kiểm/chu kỳ bổ sung cuối cùng để hoàn thành. Điều này có vẻ quá hacky.

Một điều khác mà tôi đã thử là bao gồm xác nhận trong setImmediate(), hoạt động tốt miễn là xác nhận chuyển. Nếu nó không thành công, nó sẽ chấm dứt toàn bộ bài kiểm tra vì lỗi vô ích.

Có ai đã khắc phục sự cố này không?

Answer 1

Đây là cách tôi đã giải quyết. Hy vọng rằng sẽ giúp một ai đó.

import { mount } from 'enzyme'; 

describe('MyComponent',() => { 

    const fakeA = Promise.resolve('a'); 
    const fakeB = Promise.resolve('b'); 
    const fakeC = Promise.resolve('c'); 

    MyComponent.prototype.fetchA = jest.fn(() => fakeA); 
    MyComponent.prototype.fetchB = jest.fn(() => fakeB); 
    MyComponent.prototype.fetchC = jest.fn(() => fakeC); 

    it('sets needed state', async (done) => { 
    const wrapper = mount(<MyComponent />); 
    await Promise.all([ fakeA, fakeB, fakeC ]); 

    setImmediate(() => { 
     // Without the try catch, failed expect will cause the 
     // whole test to crash out. 
     try { 
     expect(wrapper.state()).toEqual({ 
      a: 'a', 
      b: 'b', 
      c: 'c', 
     }); 
     } catch(error) { 
     done.fail(error); 
     } 
     done(); 

    }); 

});