jest test 測試要等待的東西


https://github.com/mrdulin/react-act-examples/blob/master/sync.md

  describe('page buttons', () => {
    it('should change page number when click the next button', async () => {
      // Given
      let wrapper;

      act(() => {
        wrapper = mount(<PDFViewer pdf={pdfUrl} />);
        wrapper.find('Document').props().onLoadSuccess({ numPages: 2 });
      });

      const buttonRight = wrapper.find('.PDFViewer__button-right');
      expect(wrapper.find('Page').props().pageNumber).toEqual(1);

      // When
      act(() => {
        buttonRight.simulate('click');
      });
      wrapper.update();

      // Then
      expect(wrapper.find('Page').props().pageNumber).toEqual(2);
    });

    it('should change page number when click the prev button', async () => {
      // Given
      let wrapper;

      act(() => {
        wrapper = mount(<PDFViewer pdf={pdfUrl} />);
        wrapper.find('Document').props().onLoadSuccess({ numPages: 2 });
      });

      const buttonRight = wrapper.find('.PDFViewer__button-right');
      const buttonLeft = wrapper.find('.PDFViewer__button-left');
      expect(wrapper.find('Page').props().pageNumber).toEqual(1);
      act(() => {
        buttonRight.simulate('click');
      });
      wrapper.update();

      // When
      act(() => {
        buttonLeft.simulate('click');
      });
      wrapper.update();

      // Then
      expect(wrapper.find('Page').props().pageNumber).toEqual(1);
    });
  });

Ref

Alex Krolick: Testing Async Components
https://www.youtube.com/watch?v=b8SOFNc_X_A&list=PLRvKvw42Rc7NEul9GviGijdznGbh8yl4Z&index=5








你可能感興趣的文章

猜數字

猜數字

Function component vs Class component

Function component vs Class component

CDS2019 Next-generation web styling 整理介紹

CDS2019 Next-generation web styling 整理介紹






留言討論