javascript - Can Firebase Emulators be used for integration testing with a React frontend?

Question

I have a simple React frontend application that uses Firebase for Auth and Firestore (https://jlowen-netflix.netlify.app/ if additional context helpful). I provide Firebase as a Context to my top-level application, and listen for a change in Auth to redirect the user to logged in content.

I would like to test end-to-end user workflow from anonymous, to sign-up, to logged in. I have already installed the Firebase CLI as well as the Firebase emulators. I can verify the emulators run correctly by visiting the Emulator UI on localhost. I also can verify the application hooks in to the emulators when I start the dev server (npm start) for Create-React-App. I made a test user in the Emulator UI, and was able to log in as expected.

When I try to get this to render in Jest, my auth listener custom hook attempts to access the auth() method on the firebase context prior to firebase initialization.

 TypeError: Cannot read property 'auth' of undefined

       9 |   // As recommended by Firebase - need to set up subscription
      10 |   useEffect(() => {
    > 11 |     const listener = firebase.auth().onAuthStateChanged((authUser) => {
         |                               ^
      12 |       console.log(`Firebase detected auth change: ${authUser}`)
      13 |       if (authUser) {
      14 |         localStorage.setItem("authUser", JSON.stringify(authUser))

      at src/hooks/use-auth-listener.js:11:31

I can't seem to resolve what seems to be some sort of async issue that I encounter in Jest, but does not occur in the deployed application.

I am pretty new in React and Jest, so if I can provide additional information, please let me know!

Answer 1

等待大神答复