1

I've been trying to set up some Jest tests in a Next.js app where a Firebase emulator is used for the purposes of testing.

My overall objective is to run tests automatically from GitHub actions with the Firebase emulators running.

I have followed the official instructions to set up Jest testing with Next Rust compiler. However, importing anything from Firebase causes this error:

with-jest-app\node_modules\firebase\app\dist\esm\index.esm.js:1  
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import { registerVersion } from '@firebase/app';
                                                                                      ^^^^^^

    SyntaxError: Cannot use import statement outside a module

Ultimately my goal would be to have something like this:

import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom';
import { firestore } from '../src/lib/firebase';
import { connectFirestoreEmulator } from 'firebase/firestore';

describe('Example', () => {
    connectFirestoreEmulator(firestore, 'localhost', 8080);

    // Now any calls to Firestore will use the emulator instead of the live database

    it('example test', () => {
        render(<div>Hello</div>);

        const heading = screen.getByText('Hello');

        expect(heading).toBeInTheDocument();
    });
});

Where the Firebase emulator is connected for the purposes of running tests.

Note too, that since many pages and components ultimately have references to Firestore as well, just importing those alone will cause the error too. This means that even if the emulator part was ignored, just importing any component that ultimately relies on Firebase would cause this problem - for example, just the home page of the app.

I've tried several different solutions and I'm at a bit of a loss for how to solve the problem, or even what the problem is really.

I'm quite new to this kind of testing, as well as React and Next in general, so perhaps I'm going about this all wrong. Any assistance with this would be greatly appreciated!

tubbytoad42
  • 283
  • 1
  • 6
  • Does changing from `import` to `require` improve the situation? https://stackoverflow.com/questions/58211880/uncaught-syntaxerror-cannot-use-import-statement-outside-a-module-when-import – Chris Jan 25 '23 at 20:42

0 Answers0