Search code examples
javascriptnode.jsjestjsgit-submodules

Jest error with vanilla JS submodules: SyntaxError: Cannot use import statement outside a module

I have a function that uses modules from a submodule and when I try to run the test it fails with SyntaxError: Cannot use import statement outside a module.

enter image description here

If I run the code calling from a normal file the module loads and execute, so I'm sure the issue is on my Jest configuration, not on my code, but looks like the import statement inside my submodule is failing with Jest.

The submodule is on the .helpers folder.

Translator/index.js

import { Excel } from './excel.js'
import { Auth } from '../.helpers/Helpers/auth.js'
import { secret } from '../.helpers/Helpers/secret.js'

/**
 * Read the request and add it to the queue
 * @param {object} context The context from Azure
 * @param {{ contentBytes: string, translations: { Title: string, Term: string }[] }} req The request object
 */
async function start (context, req) {
  ...
}

Translator/package.json

{
    ...
    "type": "module",
    "scripts": {
        "test": "jest --coverage --coverageDirectory=coverage",
        "local": "node ./Translator/local.js",
        "check-package": "npm-check",
        "update": "npm-check -u",
        "postinstall": "submodules-install"
    },
    "jest": {
        "setupFiles": [
            "<rootDir>/.jest/init.js",
            "<rootDir>/.jest/console.js"
        ],
        "collectCoverageFrom": [
          "Translator/**/*test.js"
        ],
        "testPathIgnorePatterns": [
          "<rootDir>/.helpers/"
        ],
        "coverageReporters": [
            "text",
            "cobertura",
            "html"
        ],
        "reporters": [
            "default",
            "jest-junit"
        ]
    },
    "jest-junit": {
        "outputDirectory": "coverage",
        "outputName": "test-results.xml",
        "usePathForSuiteName": "true"
    },
    "submodules": [
      ".helpers"
    ],
    ...

If I move the submodule files to the src folder, Jest runs normally :(

This is the package.json of the submodule.

.helper/package.json

{
    ...
    "type": "module",
    "scripts": {
        "test": "jest --coverage --coverageDirectory=coverage",
        "build": "tsc",
        "check-package": "npm-check",
        "update": "npm-check -u"
    },
    "jest": {
        "setupFiles": [
            "<rootDir>/.jest/init.js",
            "<rootDir>/.jest/console.js"
        ],
        "coverageReporters": [
            "text",
            "cobertura",
            "html"
        ],
        "reporters": [
            "default",
            "jest-junit"
        ]
    },
    "jest-junit": {
        "outputDirectory": "coverage",
        "outputName": "test-results.xml",
        "usePathForSuiteName": "true"
    },
    ...
}

I don't use Babel or any transpiling tool, it's pure vanilla JavaScript, but I have a .babelrc file so Eslint on VSCode understands private methods, but I just noticed it has something about "tests" on it, so it might be related.

.babelrc

{
  "presets": [
    ["@babel/preset-env",
    {
      "shippedProposals": true
    }]
  ],
  "env": {
    "test": {
      "plugins": ["@babel/plugin-transform-runtime"]
    }
  }
}

Any idea what configs I'm missing?

Solution

  • So... I renamed .babelrc to babel.config.json and it is working. I didn't change anything else!

    I'm just leaving this question here so if anyone comes to something similar they will know the solution.