4

I'm at a boiling point with getting Jest to understand ES6 modules import/export syntax and it is hindering my project development progress. My project structure is the following:

root module
  org-domain (ES6)
  org-services (ES6)
  react-ui-module (React via CRA2)

org-services has a local path dependency on org-domain in its package json: 

// in org-services package.json

"dependencies": {
   "@org/domain": "file:../org-domain",
},

My .babelrc in org-services is the following:

{
  "env": {
    "test": {
      "presets": ["@babel/preset-flow", "@babel/preset-env"]
      "plugins": ["@babel/plugin-transform-modules-commonjs"]
    }
  },
  "presets": [
    "@babel/preset-flow",
    ["@babel/preset-env", {
      "targets": {
        "esmodules": true
      }
    }]
  ],
  "plugins": [
    ["module-resolver", {
      "root": ["./node_modules/@org/domain"],
      "alias": {
        "@org/constants": "./node_modules/@org/domain/src/constants",
        "@org/contracts": "./node_modules/@org/domain/src/request-contracts"
      }
    }]
  ]
}

I do not know if the problem is due to how I am including my dependencies so I'm going to add the finer details of anything related to my import/export of these modules for the sake of clarity.

In the implementation files of org-services I am importing org-domain using npm scoped syntax like so: import ... from '@org/domain

Here are some observations I have:

In local development, when I try to reference click @org/domain, instead of being directed to org-services/node_modules/@org/domain I get redirected to the actual relative directory location which is root/org-services. I believe Jest ignores node_modules (correct me if I am wrong) but in my jest.config.js for org-services, I have:

collectCoverage: true,
coverageDirectory: 'coverage',
coveragePathIgnorePatterns: [
  '/node_modules/'
],
moduleDirectories: [
  'src',
  'node_modules'
],
moduleFileExtensions: [
  'js'
],
transform: {
  '^.+\\.js$': 'babel-jest'
},
transformIgnorePatterns: [
  'node_modules/(?!@org/domain)$'
]

To my understanding, everything should just work right now with all the configuration I have with respect to setting the plugin @babel/plugin-transform-modules-commonjs in test (within .babelrc) and including the '^.+\\.js$': 'babel-jest' instruction under the transform key in jest.config.js located under org-services -- but it does not.

I have tried every single thing I could find online with respect to this issue with no success. I have not gotten anywhere since and my patience is lost with this testing framework and the lack of support for ES6. It should not be this hard, so clearly I am doing something wrong here. Please advise.

Update 1

Found another SO post that is a mirror of this situation I am in. Jest fails to transpile import from npm linked module

Unfortunately, the provided solution does not work for my case.

Danchez
  • 1,266
  • 2
  • 13
  • 28
  • Have you made any progress with this? – 42tg Nov 09 '18 at 15:17
  • @42tg I was not able to solve this problem. In the end and in complete frustration, I had to merge my separate org-module packaged project into a single, monolithic package. The fact that a Yarn-workspace esque, multi-package project setup is not supported out of the box is beyond me. – Danchez Nov 15 '18 at 22:39

1 Answers1

0

After upgrading from @babel/xyz: 7.0.0 to 7.1.2 I started getting an error regarding "import"

Jest encountered an unexpected token

<snip>

Details:

C:\....\SstcStrategy.test.js:2
import sequelizeFixtures from 'sequelize-fixtures';
^^^^^^

SyntaxError: Unexpected token import

  at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)

To fix this I had to add @babel/plugin-transform-modules-commonjs as you mention in your question.

My babel.config.js now looks like this:

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          node: '8.10',
        },
        debug: false,
      },
    ],
  ],
  ignore: ['node_modules'],
  plugins: [
    '@babel/plugin-transform-runtime',
    '@babel/plugin-transform-modules-commonjs',

    // Stage 2
    ['@babel/plugin-proposal-decorators', { legacy: true }],
    '@babel/plugin-proposal-function-sent',
    '@babel/plugin-proposal-export-namespace-from',
    '@babel/plugin-proposal-numeric-separator',
    '@babel/plugin-proposal-throw-expressions',

    // Stage 3
    '@babel/plugin-syntax-dynamic-import',
    '@babel/plugin-syntax-import-meta',
    ['@babel/plugin-proposal-class-properties', { loose: false }],
    '@babel/plugin-proposal-json-strings',
  ],
};

Also BTW you don't need to define babel-jest transform in jest.config.js as this is the default setting.

Hope this helps

alexb
  • 56
  • 5