React-native-permissions: Test suite failed to run

[alexpchin]

When running with Jest, I get the above. Whilst fine, the particular issue is where it says:

• If you are getting this error while unit testing you need to mock the native module. Follow the guide in the README.

However, there are no instructions in the README.

[mikehardy]

Indeed - I think that was the plan but has not been done yet. We've figured out the mock though, want to propose a "Testing" section of the README as a PR?

Mock example: https://github.com/react-native-community/react-native-permissions/issues/324#issuecomment-538779407

[swallville]

Same issue with latest versions of jest, react-native and react-native-permission. Tried using the mock example, but without success. Even tried to mock during jest setup, but without success. Could anyone provide an app example using jest and a mock to solve this issue?

[zoontek]

@swallville https://github.com/react-native-community/react-native-permissions/issues/324#issuecomment-538779407 is a valid mock. I use the same in my current project, works like a charm.

[swallville]

I see @zoontek . Can you give me an example on how to property set the mock file and all the config files that you are using for jest? Honestly, I dont know what I'm doing wrong. Thanks in advance.

[mikehardy]

I don't know if this will help or not but this is what I have right now for jest config and mocks

(base) mike@kunashir:~/work/Kullki/ksocialscore/packages/public-app (vp1 *) % ls -lat | grep tests
drwxr-xr-x     7 mike  staff     224 Nov 13 22:39 __tests__/
(base) mike@kunashir:~/work/Kullki/ksocialscore/packages/public-app (vp1 *) % more jest.config.js 
module.exports = {
  transform: {
    '^.+\\.tsx?$': 'ts-jest',
  },
  transformIgnorePatterns: [
    'node_modules/(?!react-native|reactxp-webview|react-pose-core|animated-pose|@react-native-community/async-storage/)',
  ],
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
  preset: 'react-native',
  testEnvironment: 'jsdom',
  collectCoverage: true,
  setupFilesAfterEnv: [
    './__mocks__/mockFirebase.ts',
    './__mocks__/mockReactNative.ts',
    './__mocks__/mockAsyncStorage.ts',
  ],
};
// module.exports = {
//  testRegex: "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
// };
(base) mike@kunashir:~/work/Kullki/ksocialscore/packages/public-app (vp1 *) % ls -lat | grep mock
drwxr-xr-x    10 mike  staff     320 Nov  9 17:21 __mocks__/
(base) mike@kunashir:~/work/Kullki/ksocialscore/packages/public-app (vp1 *) % cat __mocks__/
mockAsyncStorage.ts            react-native-device-info.ts    react-native-splash-screen.ts
mockFirebase.ts                react-native-localize.ts       rn-update-apk.ts
mockReactNative.ts             react-native-permissions.ts    
(base) mike@kunashir:~/work/Kullki/ksocialscore/packages/public-app (vp1 *) % cat __mocks__/react-native-permissions.ts 
import * as RNPermission from 'react-native-permissions/lib/typescript';
const { PERMISSIONS, RESULTS } = require('react-native-permissions/lib/commonjs/constants.js');

export { PERMISSIONS, RESULTS };
// mock out any functions you want in this style...
export async function check(permission: RNPermission.Permission) {
  jest.fn();
}
(base) mike@kunashir:~/work/Kullki/ksocialscore/packages/public-app (vp1 *) % 

[swallville]

Thanks for the help @mikehardy. I will try your approach. If I still have any doubts, do you mind sharing the source code of the files inside your mocks folder? Appreciate your time and help.

[zoontek]

@swallville Here's mine if you want 🙂

// __mocks__/react-native-permissions.ts

const {PERMISSIONS, RESULTS} = require('./lib/commonjs/constants');
export {PERMISSIONS, RESULTS};

export const openSettings = jest.fn(async () => {});
export const check = jest.fn(async permission => RESULTS.GRANTED);
export const request = jest.fn(async permission => RESULTS.GRANTED);

const notificationOptions = [
  'alert',
  'badge',
  'sound',
  'criticalAlert',
  'carPlay',
  // 'provisional', // excluded as it's not included in NotificationSettings
];

const notificationSettings = {
  alert: true,
  badge: true,
  sound: true,
  carPlay: true,
  criticalAlert: true,
  lockScreen: true,
  notificationCenter: true,
};

export const checkNotifications = jest.fn(async () => ({
  status: RESULTS.GRANTED,
  settings: notificationSettings,
}));

export const requestNotifications = jest.fn(async options => ({
  status: RESULTS.GRANTED,
  settings: options
    .filter(option => notificationOptions.includes(option))
    .reduce((acc, option) => ({...acc, [option]: true}), {
      lockScreen: true,
      notificationCenter: true,
    }),
}));

export default {
  PERMISSIONS,
  RESULTS,
  openSettings,
  check,
  request,
  checkNotifications,
  requestNotifications,
};

[swallville]

Nice, thanks for the help @zoontek

[zoontek]

I publish the mock on the repository 🙂

[mikehardy]

Great work @zoontek

[fabriziobertoglio1987]

I am editing @mikehardy message trying to figure out how to stub the Permission in my e2e detox test:

// jest.config.js
module.exports = {
  transform: {
    '^.+\\.tsx?$': 'ts-jest',
  },
  transformIgnorePatterns: [
    'node_modules/(?!react-native|reactxp-webview|react-pose-core|animated-pose|@react-native-community/async-storage/)',
  ],
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
  preset: 'react-native',
  testEnvironment: 'jsdom',
  collectCoverage: true,
  setupFilesAfterEnv: [
    './__mocks__/mockFirebase.ts',
    './__mocks__/mockReactNative.ts',
    './__mocks__/mockAsyncStorage.ts',
  ],
};

this is the permission mock

// __mocks__/react-native-permissions.ts 
import * as RNPermission from 'react-native-permissions/lib/typescript';
const { PERMISSIONS, RESULTS } = require('react-native-permissions/lib/commonjs/constants.js');

export { PERMISSIONS, RESULTS };
// mock out any functions you want in this style...
export async function check(permission: RNPermission.Permission) {
  jest.fn();
}

[zoontek]

@fabriziobertoglio1987 You have a mock available on the repo https://github.com/react-native-community/react-native-permissions/blob/master/mock.js

[fabriziobertoglio1987]

@zoontek thanks, I noticed the mock, but I don't know how to import it and use it

an easier option is just clicking on the Permission system alert, but it does not work with Detox

other option is setting the permission on launch

I am looking into it
thanks

[zoontek]

@fabriziobertoglio1987 Same as https://github.com/react-native-community/async-storage/blob/LEGACY/docs/Jest-integration.md

But with e2E tests, I'm afraid we need to find a way to properly accept permissions

[fabriziobertoglio1987]

Thanks, I found the solution in the following stackoverflow answer