Google-signin: Jest test case fails

[kanhaic]

I'm unable to figure out how to do I fix this jest error when using google sign in

Test suite failed to run

    TypeError: Cannot read property 'BUTTON_SIZE_ICON' of undefined

      at Object.<anonymous> (node_modules/react-native-google-signin/GoogleSignin.ios.js:34:20)
      at Object.<anonymous> (node_modules/react-native-google-signin/index.js:1:107)
      at Object.<anonymous> (app/components/screens/login/login.js:6:30)

can you look at it and tell me if there is something I can fix to resolve this issue.

[keyurparalkar]

Having same problem still any fix ?

[simlmx]

After some trial and error, I managed to make it work by adding an empty file named react-native-google-signin.js in my __mock__ folder. Not that I fully understand why this works...

[darrenchiu]

getting same issue...

[vinogradov]

jest.mock('react-native-google-signin', () => {});

works for me! You can run this code before each test using setupTestFrameworkScriptFile

[Kerumen]

Random guess, what about jest.unmock('react-native-google-signin')?

[vinogradov]

@Kerumen unmock gives the original error

[Kerumen]

Okey! It seems you found a workaround.

[BobAleena]

Should this be closed if it isn't actually fixed?
Adding 'react-native-google-signin.js' into my _mock_ folder was working but it has suddenly breaking again.

[patw0929]

How about mock like this?

// put these in jest setup file
import { NativeModules } from 'react-native';

jest.mock('react-native-google-signin', () => {
  const mockGoogleSignin = require.requireActual('react-native-google-signin');

  mockGoogleSignin.GoogleSignin.hasPlayServices = () => Promise.resolve(true);
  mockGoogleSignin.GoogleSignin.configure = () => Promise.resolve();
  mockGoogleSignin.GoogleSignin.currentUserAsync = () => {
    return Promise.resolve({
      name: 'name',
      email: '[email protected]',
      // .... other user data
    });
  };

  // ... and other functions you want to mock

  return mockGoogleSignin;
});

NativeModules.RNGoogleSignin = {
  BUTTON_SIZE_ICON: 0,
  BUTTON_SIZE_STANDARD: 0,
  BUTTON_SIZE_WIDE: 0,
  BUTTON_COLOR_AUTO: 0,
  BUTTON_COLOR_LIGHT: 0,
  BUTTON_COLOR_DARK: 0,
  configure: jest.fn(),
  currentUserAsync: jest.fn(),
};

[Muneefm]

I cant seem to find a solution for this error. mocking does not work anymore.. I still get an error while running test.

` TypeError: Cannot read property 'SIGN_IN_CANCELLED' of undefined

   6 | } from 'react-native';
   7 | import PropTypes from 'prop-types';
>  8 | import { GoogleSigninButton } from 'react-native-google-signin';
     | ^
   9 | 
  10 | 
  11 | const Login = ({ onLogin }) => {`

[uioporqwerty]

I was able to fix it as documented here for others that want to know:
https://stackoverflow.com/questions/56510367/how-to-mock-a-class-and-namespace-enums-using-jest/56510628#56510628

[mikehardy]

For people still coming here from google searches, I just integrated this with the current version of '@react-native-community/google-signin' and this mock (in __mocks__/@react-native-community/google-signin.ts so it was picked up automatically - no entry in jest.config.js) seemed to work for me:

import { NativeModules } from 'react-native';
jest.mock('@react-native-community/google-signin', () => {
  const mockGoogleSignin = require.requireActual('@react-native-community/google-signin');

  mockGoogleSignin.GoogleSignin.hasPlayServices = () => Promise.resolve(true);
  mockGoogleSignin.GoogleSignin.configure = () => Promise.resolve();
  mockGoogleSignin.GoogleSignin.currentUserAsync = () => {
    return Promise.resolve({
      name: 'name',
      email: '[email protected]',
      // .... other user data
    });
  };

  // ... and other functions you want to mock

  return mockGoogleSignin;
});

NativeModules.RNGoogleSignin = {
  BUTTON_SIZE_ICON: 0,
  BUTTON_SIZE_STANDARD: 0,
  BUTTON_SIZE_WIDE: 0,
  BUTTON_COLOR_AUTO: 0,
  BUTTON_COLOR_LIGHT: 0,
  BUTTON_COLOR_DARK: 0,
  SIGN_IN_CANCELLED: '0',
  IN_PROGRESS: '1',
  PLAY_SERVICES_NOT_AVAILABLE: '2',
  SIGN_IN_REQUIRED: '3',
  configure: jest.fn(),
  currentUserAsync: jest.fn(),
};

export { NativeModules };

[vaibhavhrt]

@mikehardy had to import __mocks__/@react-native-community/google-signin.ts in my jest.setup.js which is one of the setup files mentioned in jest.config.js. But it's working now, thanks.

[mikehardy]

Hmm - I wonder if I have something special in my config that auto-does things from __mocks__ ? It doesn't appear so, but I'm glad it was useful and works for you, either way.

(base) mike@kunashir:~ % more work/Kullki/ksocialscore/packages/public-app/jest.config.js 
module.exports = {
  rootDir: './dist/tests/rnapp/js',
  roots: ['<rootDir>'],
  // transform: {
  //   '^.+\\.tsx?$': 'ts-jest',
  // },
  transformIgnorePatterns: [
    'node_modules/(?!@react-native-community/google-signin|react-native|reactxp-webview|react-pose-core|animated-pose|@react-native-community/async-storage|@unimodules/|expo-apple-authentication)',
  ],
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
  preset: 'react-native',
  testEnvironment: 'jsdom',
  collectCoverage: true,
  setupFilesAfterEnv: [
    './__mocks__/mockFirebase.js',
    './__mocks__/mockReactNative.js',
    './__mocks__/mockAsyncStorage.js',
  ],
};
// module.exports = {
//  testRegex: "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
// };

[sammysium]

For people still coming here from google searches, I just integrated this with the current version of '@react-native-community/google-signin' and this mock (in __mocks__/@react-native-community/google-signin.ts so it was picked up automatically - no entry in jest.config.js) seemed to work for me:

import { NativeModules } from 'react-native';
jest.mock('@react-native-community/google-signin', () => {
  const mockGoogleSignin = require.requireActual('@react-native-community/google-signin');

  mockGoogleSignin.GoogleSignin.hasPlayServices = () => Promise.resolve(true);
  mockGoogleSignin.GoogleSignin.configure = () => Promise.resolve();
  mockGoogleSignin.GoogleSignin.currentUserAsync = () => {
    return Promise.resolve({
      name: 'name',
      email: '[email protected]',
      // .... other user data
    });
  };

  // ... and other functions you want to mock

  return mockGoogleSignin;
});

NativeModules.RNGoogleSignin = {
  BUTTON_SIZE_ICON: 0,
  BUTTON_SIZE_STANDARD: 0,
  BUTTON_SIZE_WIDE: 0,
  BUTTON_COLOR_AUTO: 0,
  BUTTON_COLOR_LIGHT: 0,
  BUTTON_COLOR_DARK: 0,
  SIGN_IN_CANCELLED: '0',
  IN_PROGRESS: '1',
  PLAY_SERVICES_NOT_AVAILABLE: '2',
  SIGN_IN_REQUIRED: '3',
  configure: jest.fn(),
  currentUserAsync: jest.fn(),
};

export { NativeModules };

Hi. I tried your solution and it gives me "cannot read property 'configure' of undefined. I believe it is on this line:

  GoogleSignin.configure({
    scopes: ['https://www.googleapis.com/auth/drive.readonly'], // what API you want to access on behalf of the user, default is email and profile
    webClientId: Config.GOOGLE_DEV_CODE, // client ID of type WEB for your server (needed to verify user ID and offline access)
    offlineAccess: true, // if you want to access Google API on behalf of the user FROM YOUR SERVER
    hostedDomain: '', // specifies a hosted domain restriction
    loginHint: '', // [iOS] The user's ID, or email address, to be prefilled in the authentication UI if possible. [See docs here](https://developers.google.com/identity/sign-in/ios/api/interface_g_i_d_sign_in.html#a0a68c7504c31ab0b728432565f6e33fd)
    forceCodeForRefreshToken: true, // [Android] related to `serverAuthCode`, read the docs link below *.
    accountName: '', // [Android] specifies an account name on the device that should be used
    iosClientId: '<FROM DEVELOPER CONSOLE>', // [iOS] optional, if you want to specify the client ID of type iOS (otherwise, it is taken from GoogleService-Info.plist)
  });

Any idea?

[haveamission]

Getting a similar error in React Native Web. Going to try to find a workaround...

[parndt]

Getting a similar error in React Native Web. Going to try to find a workaround...

@sammysium @haveamission :wave: did you manage to find a workaround? 😄 I found that if I wrap the dependencies in my own file e.g. config/google_signin.ts then I can mock that more easily:

jest.mock('config/google_signin', () => ({
  GoogleSignin: jest.fn(),
  GoogleSigninButton: jest.requireActual(
    '@react-native-community/google-signin'
  ).GoogleSigninButton,
}))

along with test/__mocks__/react-native_modules.ts:

import { NativeModules } from 'react-native'

NativeModules.RNGoogleSignin = {
  SIGN_IN_CANCELLED: '0',
  IN_PROGRESS: '1',
  PLAY_SERVICES_NOT_AVAILABLE: '2',
  SIGN_IN_REQUIRED: '3',
}

export { NativeModules }

which is loaded from package.json:

    "setupFiles": [
      "./test/__mocks__/react-native-modules.ts",
      "./test/setup.ts"
    ],

Now in my components, I just load the components from config/google_signin instead, which is the file that calls configure() in the first place.

[deepaksoni70]

I cant seem to find a solution for this error. mocking does not work anymore.. I still get an error while running test.

` TypeError: Cannot read property 'SIGN_IN_CANCELLED' of undefined

   6 | } from 'react-native';
   7 | import PropTypes from 'prop-types';
>  8 | import { GoogleSigninButton } from 'react-native-google-signin';
     | ^
   9 | 
  10 | 
  11 | const Login = ({ onLogin }) => {`

Use this:

jest.mock('@react-native-google-signin/google-signin', () => {
return {
GoogleSigninButton: jest.fn().mockImplementation(() => {
return null;
}),
};
});