Firebaseui-web: Jest: cannot unit test due to error "The current environment does not support the specified persistence type."

[devinshoemaker]

[REQUIRED] Describe your environment

• Operating System version: macOS v10.14.6
• Browser version: v76.0.3809.132
• Firebase UI version: v4.2.0
• Firebase SDK version: v6.6.0

[REQUIRED] Describe the problem

When using Jest to write a test on a component that uses Firebase UI, the test fails due to the error "The current environment does not support the specified persistence type." This is due to the fact that this library always sets the persistence type to SESSION regardless of the Node environment. However, the test Node environment does not support this type of persistence, and consequently, the persistence should be set to NONE in this case. There does not seem to be a way of overriding this, and potentially no way of writing Jest unit tests for a component that utilizes this library. I believe that this could be handled by simply checking the process.env.NODE_ENV and setting the persistence to NONE if the environment is test, or the library could allow us to pass this in as an optional property.

If I get some time then I may experiment with a couple of approaches, but if a maintainer has an opinion on how to go about this then I am open to suggestions.

Error:

 FAIL  src/auth/containers/login/Login.test.tsx
  ● Login › should render without crashing

    The current environment does not support the specified persistence type.

       5 | 
       6 | describe('Login', () => {
    >  7 |   it('should render without crashing', () => {
         |   ^       8 |     const { unmount } = render(<Login />);
       9 |     unmount();
      10 |   });
      at new Spec (node_modules/jest-jasmine2/build/jasmine/Spec.js:116:22)      at Suite.it (src/auth/containers/login/Login.test.tsx:7:3)
      at Object.describe (src/auth/containers/login/Login.test.tsx:6:1)

  ● Login › should render without crashing

    TypeError: Cannot read property 'delete' of undefined

      at render (node_modules/react-firebaseui/webpack:/StyledFirebaseAuth/src/FirebaseAuth.jsx:116:3)

[wti806]

You can change the persistence type to none on the Auth instance being passed to FirebaseUI: https://firebase.google.com/docs/auth/web/auth-state-persistence

firebase.auth().setPersistence(firebase.auth.Auth.Persistence.NONE).then(() => {
  ui = new firebaseui.auth.AuthUI(firebase.auth());
});

[benallfree]

@wti806 I'm getting the same error using your approach. Any other ideas?

[Tarun047]

You can change the persistence type to none on the Auth instance being passed to FirebaseUI: https://firebase.google.com/docs/auth/web/auth-state-persistence

firebase.auth().setPersistence(firebase.auth.Auth.Persistence.NONE).then(() => {
  ui = new firebaseui.auth.AuthUI(firebase.auth());
});

Yes this does not work

[devinshoemaker]

It did not work for me either. This is the auth I am passing in:

firebase.auth.Auth.Persistence.NONE;
const firebaseApp: firebase.app.App = firebase.initializeApp(firebaseConfig);
export const auth = firebaseApp.auth();

[devinshoemaker]

@wti806 are there any other possible workarounds for this?

[Tarun047]

@wti806 are there any other possible workarounds for this?

I ended up using plain JS and buidling my own ui.

[MaxAltena]

Has anyone found a solution or a possible workaround for this?

[cosmini]

My solution was to set persistence and then start the ui.
Persistence will check if env is testing and set it to none otherwise it can default to local or session if there's a remember me option.

Here is a snippet

      .auth()
     // can set session if remember me option exists
      .setPersistence(process.env.NODE_ENV === 'test' ? firebase.auth.Auth.Persistence.NONE : firebase.auth.Auth.Persistence.LOCAL)
      .then(function () {
        // get the firebaseui instance
        const ui =
          firebaseui.auth.AuthUI.getInstance() ||
          new firebaseui.auth.AuthUI(firebase.auth())
        ui.start('#firebaseui-auth-container', {/*firebase config here*/})
      })

[ApiJoe]

My solution was to set persistence and then start the ui.
Persistence will check if env is testing and set it to none otherwise it can default to local or session if there's a remember me option.

Here is a snippet

      .auth()
     // can set session if remember me option exists
      .setPersistence(process.env.NODE_ENV === 'test' ? firebase.auth.Auth.Persistence.NONE : firebase.auth.Auth.Persistence.LOCAL)
      .then(function () {
        // get the firebaseui instance
        const ui =
          firebaseui.auth.AuthUI.getInstance() ||
          new firebaseui.auth.AuthUI(firebase.auth())
        ui.start('#firebaseui-auth-container', {/*firebase config here*/})
      })

This worked for me. thank you.