I’m using Jest to test an information display component. After my onSubmit handler is “clicked”, an information card takes the place of the form component.

The onSubmit handler is inside the form component. After onSubmit is clicked, the form unmounts before the .finally() block is resolved resulting in an error.

This problem does not happen when I test locally. It only happens when I run my Jest test.

 it.only('renders the page with the card present with form information.', async () => {
    render(
      <ExperienceContext.Provider value={experienceContextData}>
        <EditPage {...defaultOptions} />
      </ExperienceContext.Provider>,
    );

    await act(async () => {
      fireEvent.click(screen.getByTestId('submitButton'));
    });})

const formComponent = () => { 

const handleSubmit = () => {
    let promise: Promise<{ purchaser: Purchaser } | { err: any }> | undefined;
    setIsSubmitting(true);

    if () {
 //Submit something
    } else {
      //submit something else
          if (promise) {
            promise
              .then(res => {
                   if (condtion) {
                        onUpdate();
                    //renders a card component in place of the form component
                        setFooter(undefined);
                        setTitle('');
                      } 
                    }
                  }
                } catch (err) {
                  console.log(
                    'error',
                    err,
                  );
                }
              })
              .catch(setError);
          }
        })
        .finally(() => {setIsSubmitting(false); console.log('finally')});
//Testing locally, this is executed. With Jest, it does not.
    }
  };}

console.error
    Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
        at Form (form-v2.tsx:28:3)

      207 |           }
      208 |         })
    > 209 |         .finally(() => {setIsSubmitting(false); console.log('finally')});
          |                         ^
      210 |     }
      211 |   };
      212 |