menu

Questions & Answers

React Testing, with Jest, out of memory

Rendering from App-level to create multiple tests that work through several UI to test.

describe("<App />", () => {
    let server: any = null;
    beforeEach(() => {
        jest.resetModules();
        server = makeServer({ environment : "test" });
    });
     
    afterEach(() => {
      server.shutdown();
    });

    test("login list modules edit 1st module", async () => {
      const result = render(<App />);      
      const user = userEvent.setup();
      const btnLogin = screen.getByText(/Login/i) as HTMLButtonElement;
      expect(btnLogin.disabled).toBe(false);
      await userEvent.click(btnLogin);
    
      let btnOk = screen.queryByText(/OK/i) as HTMLButtonElement;
      if (btnOk == null) {
        //already logged in
        return;
      }
      expect(btnOk.disabled).toBe(true);
      let btnCancel = screen.getByText(/Cancel/i) as HTMLButtonElement;
      expect(btnCancel.disabled).toBe(false);

      fireEvent.change(screen.getByLabelText(/Access Code/i) as HTMLInputElement, { target: { value: 'USER' } });
      expect(btnOk.disabled).toBe(false);
      await userEvent.click(btnOk);
      
      let orig_list: HTMLElement[] = []
      await waitFor(() => { 
        orig_list = screen.queryAllByRole(/contentinfo/i);
        expect(orig_list.length).toBeGreaterThanOrEqual(3);
      });
        
       // Waiting for list to load.      
      const settings = screen.getAllByTestId('settings') as HTMLElement[];
      expect(settings.length).toBeGreaterThanOrEqual(3);
      await user.click(settings[0]);

      const edit = screen.getByTestId('EDIT');
      await user.click(edit);
      const googleId = screen.getByLabelText('Google Sheet ID');

      fireEvent.change(googleId, { target: { value: '1JPxMDvRfFS0HF60HZZRoa64LxSGOQFIay1SeccvTest' } });
      const saveModuleDiaLog = screen.getByTestId('saveModuleDiaLog') as HTMLButtonElement;
      await user.click(saveModuleDiaLog);
      
    });
});

I have multiple tests that do this process.

  • Render App
  • Login
  • Wait for the Screen to load.
  • Then perform a specific test.

My issue is locally everything runs fine. When I run it in a BitBucket pipeline it appears to hang.

  • How do I make sure that 1 test is completely removed from memory before starting the next one? What can I put in the afterEach to clear memory?
  • Can I move some of the common code to a method(s) that can be called by all tests to setup? This would improve read-ability.
Comments:
2023-01-23 23:25:05
The problem isnt that you need to clear memory between tests -- nor can you do so directly as JS is a language that is automatically garbage collected. Either you are doing something in the test (looks fine though), test setup (what does makeSever do exactly), or in the thing you are testing that is reaching the defined memory limits of your CI service. This could be a memory leak, or something in a loop, or, whatever you do is simply too intense (again, knowing more about makeServer would be interesting)
2023-01-23 23:25:05
I'll add that if makeServer is heavy, and you are closing and starting it with every test, this is probably pretty intense when you have multiple test files because Jest runs diff files concurrently. You might want to try running jest with the --runInBand flag. But it would be better to refactor the server part such that there is one of those shared between all test files.
Answers(0) :