Jest: Jest not transpiling an imported javascript file in a different directory

[kepeterson]

🐛 Bug Report

I have a jest project using a directory structure that looks like this

Project A
|
|- .babelrc
|- package.json (with jest config)
|
 -components
  |
  |- Card.jsx

 -__tests__
  |
  |- Card.test.jsx

shared
|
|- .babelrc
|
|- constants
  |
  | - user.js

Card.jsx imports some values from user.js which uses ES6 modules. Card.jsx imports using a relative import path import { settings } from '../../shared/constants/users'. When I run jest, I get the following error when user.js attempts to import from another file:

import { membershipStatuses } from './orgs';           
       ^

SyntaxError: Unexpected token {

  3 | 
  4 | 
> 5 | import { settings } from '../../shared/constants/users';
    | ^


  at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:471:17)
  at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:513:25)
  at Object.<anonymous> (components/SidenavContactCard.jsx:5:1)

It seems to me that Jest is not transpiling files in other directories outside of the root of the jest project. How do I configure Jest to make this work?

Expected behavior

Jest and Babel work together to transpile user.js properly.

Run npx envinfo --preset jest

Paste the results here:

  System:
    OS: macOS 10.14.5
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
  Binaries:
    Node: 10.13.0 - ~/.nvm/versions/node/v10.13.0/bin/node
    Yarn: 1.10.1 - ~/.nvm/versions/node/v10.13.0/bin/yarn
    npm: 6.4.1 - ~/.nvm/versions/node/v10.13.0/bin/npm
  npmPackages:
    jest: ^24.8.0 => 24.8.0 

jest --debug

> jest "--debug"

{
  "configs": [
    {
      "automock": false,
      "browser": false,
      "cache": true,
      "cacheDirectory": "/private/var/folders/sr/mvj8wg_n6s1b7jqpd9vjxc1m0000gn/T/jest_dx",
      "clearMocks": true,
      "coveragePathIgnorePatterns": [
        "/node_modules/"
      ],
      "cwd": "/Users/kyle/Code/spoke/clients/next",
      "dependencyExtractor": null,
      "detectLeaks": false,
      "detectOpenHandles": false,
      "errorOnDeprecated": false,
      "filter": null,
      "forceCoverageMatch": [],
      "globalSetup": null,
      "globalTeardown": null,
      "globals": {},
      "haste": {
        "computeSha1": false,
        "providesModuleNodeModules": [],
        "throwOnModuleCollision": false
      },
      "moduleDirectories": [
        "node_modules"
      ],
      "moduleFileExtensions": [
        "js",
        "json",
        "jsx",
        "ts",
        "tsx",
        "node"
      ],
      "moduleNameMapper": {},
      "modulePathIgnorePatterns": [],
      "name": "6cb406f566a4d486a3b72451e6d0fd85",
      "prettierPath": "prettier",
      "resetMocks": false,
      "resetModules": false,
      "resolver": null,
      "restoreMocks": false,
      "rootDir": "/Users/kyle/Code/spoke/clients/next",
      "roots": [
        "/Users/kyle/Code/spoke/clients/next"
      ],
      "runner": "jest-runner",
      "setupFiles": [],
      "setupFilesAfterEnv": [],
      "skipFilter": false,
      "snapshotSerializers": [],
      "testEnvironment": "/Users/kyle/Code/spoke/clients/next/node_modules/jest-environment-jsdom/build/index.js",
      "testEnvironmentOptions": {},
      "testLocationInResults": false,
      "testMatch": [
        "**/__tests__/**/*.[jt]s?(x)",
        "**/?(*.)+(spec|test).[tj]s?(x)"
      ],
      "testPathIgnorePatterns": [
        "/node_modules/"
      ],
      "testRegex": [],
      "testRunner": "/Users/kyle/Code/spoke/clients/next/node_modules/jest-jasmine2/build/index.js",
      "testURL": "http://localhost",
      "timers": "real",
      "transform": [
        [
          "^.+\\.[jt]sx?$",
          "/Users/kyle/Code/spoke/clients/next/node_modules/jest-config/node_modules/babel-jest/build/index.js"
        ]
      ],
      "transformIgnorePatterns": [
        "/node_modules/"
      ],
      "watchPathIgnorePatterns": []
    }
  ],
  "globalConfig": {
    "bail": 0,
    "changedFilesWithAncestor": false,
    "collectCoverage": false,
    "collectCoverageFrom": null,
    "coverageDirectory": "/Users/kyle/Code/spoke/clients/next/coverage",
    "coverageReporters": [
      "json",
      "text",
      "lcov",
      "clover"
    ],
    "coverageThreshold": null,
    "detectLeaks": false,
    "detectOpenHandles": false,
    "errorOnDeprecated": false,
    "expand": false,
    "filter": null,
    "globalSetup": null,
    "globalTeardown": null,
    "json": false,
    "listTests": false,
    "maxConcurrency": 5,
    "maxWorkers": 11,
    "noStackTrace": false,
    "nonFlagArgs": [],
    "notify": false,
    "notifyMode": "failure-change",
    "passWithNoTests": false,
    "projects": null,
    "rootDir": "/Users/kyle/Code/spoke/clients/next",
    "runTestsByPath": false,
    "skipFilter": false,
    "testFailureExitCode": 1,
    "testPathPattern": "",
    "testResultsProcessor": null,
    "testSequencer": "/Users/kyle/Code/spoke/clients/next/node_modules/@jest/test-sequencer/build/index.js",
    "updateSnapshot": "new",
    "useStderr": false,
    "verbose": null,
    "watch": false,
    "watchman": true
  },
  "version": "24.8.0"
}

[yeongjet]

you should use babel.config.js not .babelrc

[kepeterson]

Why can't I use .babelrc? It's a valid way to configure babel https://babeljs.io/docs/en/configuration

And the code compiles when webpack'd using my current babel config, so I don't think it's an issue with that. This issue only happens when trying to run a test with Jest.

[mjashanks]

I have exactly the problem, as described above.

you should use babel.config.js not .babelrc

...as suggested by yeongjet, solved my issue. Just rename the file, and do a module.exports = ...

[zquintana]

I have the same issue with babel.config.js. Any ideas why?

[subhasishdas159]

same here