Vitest

Vitest is a nodejs testing framework from the Vite project which is commonly used for testing NextJS applications.

NextJS provide a walkthrough for setting up Vitest here.

Checking Elements are in the DOM

npm install --save-dev @testing-library/jest-dom

In your test file add:

import '@testing-library/jest-dom/vitest'

And then in the test itself you can add the expectation:

expect(...).toBeInTheDocument();

Mocking fetch requests

If you are testing functions that make calls to the fetch() command you can mock it globally. You will probably also need to give it a mocked return value to prevent the call returning null which breaks promise chains in the target function.

 
describe("My test suite", ()=>{
    // Define the mock fetch function
    const mockFetch = vi.fn(() =>
        Promise.resolve({
          ok: true,
          json: () => Promise.resolve({}),
        })
    ) as Mock;
 
 
    // Set up the mock before your tests
    beforeAll(() => {
        global.fetch = mockFetch;
    });
    
    // Reset the mock after each test
    afterEach(() => {
        // ...
        mockFetch.mockReset();
    });
 
});

Then inside a test case

describe("My test suite", ()=>{
 
	//... other definitions and tests
 
	it("should do a thing", ()=>{
		mockFetch.mockResolvedValueOnce(Promise.resolve());
	});
 
});