Trouble importing modules to use in detox test files

[jn3qf]

Is your feature request related to a problem? Please describe.
I'm struggling to import external packages to use with Detox test files. My specific use case is that a testID is linked to a unique key that I need to pull from a firebase database.

Is there a current consensus on the best way to import modules into a test.spec.js style e2e file so that Detox can use them in tests?

Describe the solution you'd like
It would be great if there was an example in documentation describing how to import ES6 modules.

Describe alternatives you've considered
I've looked through these threads documenting similar issues, but all the solutions that I've tried have not worked for me (the majority of the responses were from 2018/early 2019)
vuejs/vue-cli#1584
jestjs/jest#6933

Steps to reproduce:

1. add import database from '@react-native-firebase/database'; to the top of the test file
2. run npx react-native start &
3. run npx detox test -c ./e2e/test.spec.js

Configuration
babel.config.js:

module.exports = {
  presets: [
    [
      'babel-preset-env',
      {
        targets: {
          node: 'current'
        }
      }
    ]
  ]
};

package.json:

{
  "name": <omitted>,
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "react-scripts jest",
    "lint": "eslint .",
    "preinstall": "node scripts/pre-install.js",
    "appium": "appium",
    "build:android": "scripts/build-android.sh",
    "build:ios": "scripts/build-ios.sh",
    "test:android": "appium-helper --platform android",
    "test:ios": "appium-helper --platform ios",
    "test:local-e2e": "OS=both scripts/run-local-tests.sh",
    "run-emulator:android": "scripts/run-android-emulator.sh",
    "kill-emulator:android": "scripts/kill-android-emulator.sh"
  },
  "dependencies": {
    "@react-native-firebase/app": "^6.0.2",
    "@react-native-firebase/auth": "^6.0.2",
    "@react-native-firebase/database": "^6.0.2",
    "babel-plugin-dynamic-import-node": "^2.3.0",
    "detox": "15.1.3",
    "geocodio-library-node": "^1.0.0",
    "prettier": "^1.19.1",
    "react": "16.12.0",
    "react-native": "0.61.5",
    "react-native-animatable": "^1.3.3",
    "react-native-collapsible": "^1.5.1",
    "react-native-gesture-handler": "^1.4.1",
    "react-native-reanimated": "^1.7.0",
    "react-native-screens": "^2.0.0-alpha.27",
    "react-native-segmented-control-tab": "^3.4.1",
    "react-native-testing-library": "^1.11.1",
    "react-navigation": "^4.0.10",
    "react-navigation-stack": "1.9.3"
  },
  "devDependencies": {
    "@babel/core": "^7.8.3",
    "@babel/runtime": "^7.8.3",
    "@react-native-community/eslint-config": "^0.0.6",
    "appium": "1.16.0",
    "babel-jest": "^25.1.0",
    "babel-preset-env": "1.7.0",
    "babel-preset-react-native": "4.0.1",
    "babel-preset-react-native-stage-0": "1.0.1",
    "babel-preset-stage-0": "6.24.1",
    "eslint": "^6.5.1",
    "jest": "^25.1.0",
    "metro-react-native-babel-preset": "^0.58.0",
    "prop-types": "15.7.2",
    "react-test-renderer": "16.12.0",
    "tape-async": "2.3.0",
    "tipsi-appium-helper": "3.3.0",
    "webdriverio": "5.18.6"
  },
  "jest": {
    "preset": "react-native",
    "transformIgnorePatterns": [
      "node_modules/(?!((jest-)?react-native|react-navigation|@react-navigation|@react-native-firebase.*))"
    ],
    "transform": {
      "^.+\\.js$": "babel-jest"
    },
    "setupFiles": [
      "./node_modules/react-native-gesture-handler/jestSetup.js",
      "react-native/jest/setup.js",
      "./jest/setup.js"
    ]
  },
  "detox": {
    "configurations": {...},
    "test-runner": "jest"
  }
}

Device and Verbose Detox Logs

  ● Test suite failed to run

    Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    .../node_modules/@react-native-firebase/database/lib/index.js:18
    import { isBoolean, isNumber, isString } from '@react-native-firebase/app/lib/common';
    ^^^^^^

    SyntaxError: Cannot use import statement outside a module

    > 1 | import database from '@react-native-firebase/database';

Environment (please complete the following information):

• Detox: 15.1.3
• React Native: 0.61.5
• Node: 13.5.0
• Device: Dell XPS 13 2019
• OS: Arch Linux
• Test-runner: Jest+jasmine

[jn3qf]

Has anyone been able to import ES6 modules into their project, and would able to recommend something in the interim?

[naushad-madakiya]

I am also facing the similar issue here.

[rotemmiz]

This is not a Detox issue per-se, it's an environment issue. You can do one of the two:

1. Setup Babel preprocessor on your tests, as you would on unit tests you write with jest. I don't have a specific example though.
2. Use node with esmodules support, I think that node 13.2 has esmodules support out of the box.

[fabOnReact]

The result of my research

setup up jest with babel

https://stackoverflow.com/a/51842304
jestjs/jest#5164 (comment)

Thanks

[chika-kasymov]

@jn3qf I had a similar issue. I noticed that the default runner's config path if you don't specify is the e2e/config.json. So if you've got the Jest config like me in the package.json, then you need to copy paste you Jest configurations to the e2e/config.json.

To avoid duplication of configs I created a base config file:

module.exports = {
  preset: "react-native",
  transformIgnorePatterns: [
    "node_modules/(?!(react-native|react-native-.*|react-navigation|react-navigation-.*|@react-navigation|@storybook|@react-native-community)/)",
    "@shared/",
  ],
  transform: {
    "^.+\\.[jt]sx?$": [
      "babel-jest",
      {
        configFile: "./babel.config.js",
      },
    ],
  },
  roots: ["."],
  testEnvironment: "jsdom",
};

Then I removed "jest": ... from the package.json and added a separate file jest.config.js:

const baseConfig = require("./base.jest.config.js");

module.exports = {
  ...baseConfig,
  setupFiles: [
    "<rootDir>/../../node_modules/react-native/jest/setup.js",
    "<rootDir>/../../node_modules/react-native-gesture-handler/jestSetup.js",
    "<rootDir>/../../test/setup.ts",
  ],
  testPathIgnorePatterns: ["/node_modules/", "/e2e"],
  snapshotSerializers: ["enzyme-to-json/serializer"],
};

Then I replaced the e2e/config.json with the e2e/config.js:

const baseConfig = require("../base.jest.config.js");

module.exports = {
  ...baseConfig,
  setupFilesAfterEnv: ["./init.ts"],
  setupFiles: [
    "<rootDir>/../../../node_modules/react-native/jest/setup.js",
    "<rootDir>/../../../node_modules/react-native-gesture-handler/jestSetup.js",
    "<rootDir>/../../../test/setup.ts",
  ],
  testPathIgnorePatterns: ["/node_modules/"],
};

Finally, when calling the test command I specify the custom path for the runner config: detox test -c ios.sim.debug --runner-config e2e/config.js.

PS: Please notice that paths like <rootDir>/../.. are needed in my project because of the mono repo setup.

[my-name-is-nheo]

Any updates on this with latest detox and rn ?

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you believe the issue is still relevant, please test on the latest Detox and report back.

Thank you for your contributions!

For more information on bots in this reporsitory, read this discussion.

[stale]

The issue has been closed for inactivity.

[psdewar2]

@jn3qf what did you end up doing?

[julianD77]

Thanks @chika-kasymov your post helped us to solve our issue, which involved adding the following to our detox specific jest.config.js:

    transform: {
        '^.+\\.[jt]sx?$': [
            'babel-jest',
            {
                configFile: './babel.config.json'
            }
        ]
    }

For reference the error we were seeing was:

/workdir/src/e2e/globalSetup.js:2
import { execSync } from 'child_process';
^^^^^^
  
SyntaxError: Cannot use import statement outside a module

[noomorph]

Sounds like we just need some new guide for that in the docs... 🤔

[noomorph]

Still relevant. We're looking for volunteers who are familiar with Jest and can help with writing such a guide for the Detox website.

[Bucci83]

these solutions don't work, please help