Блог

У меня есть модальный компонент, который я визуализирую для нескольких тестов, например:

 const result = render(<MyModal {...myTestProps} />);
const modalComponent = screen.getByTestId('modal-client-id');
 

В одном из моих тестов я отклоняю модальный:

    it("Closes modal when cancel button is clicked", async(done) => {
       const result = render(<MyModal {...myTestProps} />);
       const modalComponent = screen.getByTestId('modal-client-id');
       const cancelButton = screen.getByTestId('modal-cancel-button');
       await act(async () => {
           new Promise((resolve, reject) => {
               fireEvent.click(cancelButton);
               done();
           });
       });
       expect(modalComponent).not.toBeInDocument();
   });
 

Но при последующих испытаниях:

    it("Closes modal when successful", async(done) => {
       const result = render(<MyModal {...myTestProps} />);
       const modalComponent = screen.getByTestId('modal-client-id');
       const okButton = screen.getByTestId('modal-ok-button');
       await act(async () => {
           new Promise((resolve, reject) => {
               fireEvent.click(okButton);
               done();
           });
       });
       expect(modalComponent).not.toBeInDocument();
   });
 

Пройти тестИд не удается. Единственное, что отображается в документе, — это пустое

 //Cancel test
<DocumentFragment>
    <div />
    <div>
      ...Modal elements
    </div>
</DocumentFragment>

//Ok button
<DocumentFragment>
    <div />
</DocumentFragment>
 

Я попытался добавить [cleanup][1] , а также очистить/повторно инициализировать document , document.body , и document.innerhtml в afterEach , но все безрезультатно. Тесты всегда успешно выполняются, когда другие закомментированы. Сам компонент определяется с помощью крючков реакции, и я не вижу никаких глобальных побочных эффектов, исходящих от модального компонента. Есть ли способ сбросить dom, чтобы всегда повторно отображать модальный в последующих тестах?

Мой случай заключался в том, что я неправильно использовал действие и обещания. Я следовал предупреждениям и советам Act и изменил действие следующим образом:

    it("Closes modal when successful", async(done) => {
       const result = render(<MyModal {...myTestProps} />);
       const modalComponent = screen.getByTestId('modal-client-id');
       const okButton = screen.getByTestId('modal-ok-button');
       fireEvent.click(okButton);
       await waitForElementToBeRemoved(screen.getByTestId('modal-client-id');
       expect(modalComponent).not.toBeInDocument();
       done();
   });
 

Поскольку я не выполнял обещание и неправильно вызывал done() рендеринг, это вызывало побочные эффекты в моих тестах. fireEvent также не требуется внешняя оболочка с act, так как она уже выполняет действие в an act .