code: 'ERR_UNHANDLED_REJECTION' Jest react testing

I am trying to use firebase and react for authentication. I have basic authentication set up and it works on localhost.

import React, { Component } from 'react';
import './App.css';
import firebase from 'firebase';
import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';

firebase.initializeApp({
    apiKey: process.env.REACT_APP_API_KEY,
    authDomain: process.env.REACT_APP_AUTH_DOMAIN,
});

class App extends Component {
    state = { isSignedIn: false };
    uiConfig = {
        signInFlow: 'popup',
        signInOptions: [
            firebase.auth.GoogleAuthProvider.PROVIDER_ID,
            firebase.auth.FacebookAuthProvider.PROVIDER_ID,
            firebase.auth.TwitterAuthProvider.PROVIDER_ID,
            firebase.auth.GithubAuthProvider.PROVIDER_ID,
        ],
        callbacks: {
            signInSuccess: () => false,
        },
    };

    componentDidMount = () => {
        try {
            firebase.auth().onAuthStateChanged((user) => {
                this.setState({ isSignedIn: !!user });
                console.log('user', user);
            });
        } catch (error) {
            console.log(error);
        }
    };

    render() {
        console.log(process.env.REACT_APP_API_KEY);

        return (
            <div className='App'>
                {this.state.isSignedIn ? (
                    <span>
                        <div>Signed In!</div>
                        <button onClick={() => firebase.auth().signOut()}>Sign out!</button>
                        <h1>Welcome {firebase.auth().currentUser.displayName}</h1>
                        <img
                            alt='profile picture'
                            src={firebase.auth().currentUser.photoURL}
                        />
                    </span>
                ) : (
                    <StyledFirebaseAuth
                        uiConfig={this.uiConfig}
                        firebaseAuth={firebase.auth()}
                    />
                )}
            </div>
        );
    }
}

export default App;

When I run npm test i get the following error message. This is unclear where exactly the error is coming from. I have added try catch block as suggested by the error.

node:internal/process/promises:246
          triggerUncaughtException(err, true /* fromPromise */);
          ^

[UnhandledPromiseRejection: This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason "[object Object]".] {
  code: 'ERR_UNHANDLED_REJECTION'
}

I am not able to understand why this error comes up. I have written a few test for it as follows

describe('App',  () => {
    test('renders google sign in button', () => {
        render(<App />);
        const googleSignInButton = screen.getByText(/sign in with google/i);
        expect(googleSignInButton).toBeInTheDocument();
    });

    test('renders facebook sign in button', () => {
        render(<App />);
        const facebookSignInButton = screen.getByText(/sign in with facebook/i);
        expect(facebookSignInButton).toBeInTheDocument();
    });
});