Cannot test this library with jest

[Tatobarbosa]

Hi!

I'd like to know how can i test this component with jest.

I dont find any implementation of test for this library on github repository, and when i try to test it, i take the following error:

There Is some way to test or mock this library?

[ammarahm-ed]

You might need to use this in jest.config.js

transformIgnorePatterns: ['<rootDir>/../node_modules/'],

so it will transform the lib with babel.

[Tatobarbosa]

Yes, i did it!

I tryed to change "imports" to "require" on sheetmanager.js and this error stopped happening.

I think that the error occours because the library uses ES2017.

Here its my jest.config.js

module.exports = { preset: '@testing-library/react-native', moduleDirectories: ['node_modules', 'src'], transform: { '^.+\\.js$': require.resolve('react-native/jest/preprocessor.js') }, testMatch: ['**/?(*.)+(test).[jt]s?(x)'], moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'], transformIgnorePatterns: [ 'node_modules/(?!(' + 'react-native|' + 'react-navigation|' + 'react-native-config|' + 'react-native-linear-gradient|' + 'react-native-popup-menu|' + 'native-base-shoutem-theme|' + 'react-native-easy-grid|' + 'react-native-drawer|' + 'react-navigation-drawer|' + 'react-native-vector-icons|' + 'react-native-animatable|' + 'react-native-modal|' + '@react-native|' + '@react-native-community/datetimepicker|' + 'react-native-shimmer-placeholder|' + 'react-native-device-info|' + '@react-native-google-signin/google-signin|' + '@react-native-firebase/auth|' + '@react-native-firebase/app|' + 'rn-fetch-blob|' + 'react-native-adjust|' + 'react-native-reanimated|' + 'react-native-modal-datetime-picker|' + 'react-native-indicators|' + 'react-native-gesture-handler|' + 'react-native-screens|' + 'react-native-view-shot|' + 'react-native-actions-sheet|' + 'smartlook-react-native-wrapper|' + 'react-native-snap-carousel|' + '@react-native-firebase/remote-config|' + 'query-string|' + 'react-native-background-timer|' + 'react-native-collapsible|' + 'native-base)/)' ], setupFilesAfterEnv: [ '@testing-library/jest-native/extend-expect', './jest.setup.ts' ], coverageThreshold: { global: { branches: 57, functions: 68, lines: 68, statements: 68 } } };

And the .babellrc

{ "env": { "production": { "plugins": ["transform-remove-console"] } }, "plugins": [ [ "module-resolver", { "alias": { "@api": "./src/api", "@assets": "./src/assets", "@factories": "./src/factories", "@functions": "./src/functions", "@providers": "./src/providers", "@mocks": "./__mocks__", "@services": "./src/services", "@hooks": "./src/hooks", "@shared": "./src/shared", "@templates": "./src/templates", "@app-types": "./src/types", "@views": "./src/views", "@store": "./src/store" }, "extensions": [".ts", ".tsx", ".js", ".png"], "root": ["./src"] } ], "jest-hoist" ], "presets": ["module:metro-react-native-babel-preset"] }

[ammarahm-ed]

I think I will change it to commonjs. ES2017 is too new for node.

[Tatobarbosa]

I think you could release a test version with commomjs so we could test if that solves the problem.

[dkulakov]

Hi @Tatobarbosa , please check my repository, I don't have such issue.

[Tatobarbosa]

@dkulakov I don't know what you're doing different from me, but in my code it doesn't work, jest shows the error of 'Cannot use import statement outside a module'.

I've tried several things, change babel dependencies, change tsconfig, unfortunately nothing solves the problem.

It is very bad to use the lib without being able to test the behavior of the screens.

[Kaung-Htet-Hein]

jest.mock('react-native-actions-sheet', () => {
	const { View } = require('react-native')

	const ActionSheet = props => {
		return <View testID="actionSheet">{props.children}</View>
	}

	return {
		__esModule: true,
		default: ActionSheet,
		SheetManager: {
			hideAll: jest.fn(),
			hide: jest.fn(),
			show: jest.fn(),
		},
	}
})

please mock the library

[cross19xx]

Adding to @Kaung-Htet-Hein , If you have a global mock, you can have it inside __mocks__/react-native-actions-sheet as follows:

const React = require('react');
const { useImperativeHandle } = require('react');
const { View } = require('react-native');

const ActionsSheet = React.forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({}));
  return <View>{props.children}</View>;
});

module.exports = {
  __esModule: true,
  default: ActionsSheet,
  SheetManager: {
    hideAll: jest.fn(),
    hide: jest.fn(),
    show: jest.fn(),
  },
};