Babel ignored when running tests

[JamesCoyle]

Environment

1. node -v: [v10.13.0]

2. npm -v: [6.4.1]

3. npm ls jest: [23.6.0]

4. your vscode-jest settings if customized:

   • jest.pathToJest? [yarn test]

5. Operating system: [Windows 7]

Prerequisite

• are you able to run jest test from command line? [Yes]
• how do you run your tests from command line? [yarn test]

Steps to Reproduce

Run tests in console -> tests pass correctly

>yarn test
yarn run v1.12.1
$ jest
 PASS  tests/element.test.js
  √ El : Creates element (8ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        2.156s
Ran all test suites.
Done in 3.02s.

View autorun result in output -> test fails as babel not run for some reason

FAIL tests/element.test.js

  ● Test suite failed to run

    C:\Users\jcoyle\Documents\Repositories\Personal\element-js\tests\element.test.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import El from '../element';
                                                                                                    ^^

    SyntaxError: Unexpected identifier

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

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.457s
Ran all test suites related to changed files.

Relevant Debug Info

package.json details

{	
        "devDependencies": {
		"@babel/core": "^7.2.2",
		"@babel/preset-env": "^7.2.3",
		"babel-core": "7.0.0-bridge.0",
		"babel-jest": "^23.6.0",
		"jest": "^23.6.0"
	},
	"scripts": {
		"test": "jest"
	},
	"babel": {
		"presets": [
			"@babel/preset-env"
		]
	}
}

---

I doubt this is a configuration issue as there are several other issues open with very similar issues. #395 #408 #415

I did have issues getting the new babel version working from @babel/core rather than babel-core which is why I'm also using [email protected]. Not sure if this is related and perhaps we need to wait for Jest to support @babel/core natively without needing the bridge.

[steven87vt]

I have a similar problem with vscode-jest and vue-jest. The configuration seems right because the tests are being found and run however they all fail on import Vue from 'vue'.

FAIL src/XXX.Web/ClientApp/components/auth/__tests__/login.spec.js

  ● 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:

    F:\dev\win\Workspaces\trunk\src\XXX.Web\test-setup.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import Vue from 'vue';
                                                                                             ^^^^^^

    SyntaxError: Unexpected token import

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

I tried providing a babel config directly in vue-jest config babel section but it is not run prior to the tests executing, or it if is the debug option isnt printing anything. The verbose flag also seems to be ignored.

module.exports = {
  verbose: true,
  modulePaths: ['<rootdir>/ClientApp'],
  moduleFileExtensions: ['js', 'json', 'vue'],
  moduleNameMapper: {
    '\\.(css|styl|less|sass|scss|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/JestConfig/assetTransformer.js'
  },
  modulePathIgnorePatterns: ['bin/*', 'coverage/*', 'logs/*', 'obj/*', 'wwwroot/*'],
  globals: {
    NODE_ENV: 'test',
    'vue-jest': {
      babelConfig: {
        presets: [
          [
            '@babel/env',
            {
              targets: 'current node',
              useBuiltIns: 'usage',
              modules: 'commonjs',
              debug: true
            }
          ]
        ],
        plugins: ['transform-es2015-modules-commonjs', 'babel-plugin-dynamic-import-node']
      }
    }
  },
  transform: {
    '^.+\\.js$': 'babel-jest',
    '^.+\\.vue$': 'vue-jest'
  },
  setupFiles: ['./test-setup.js'],
  transformIgnorePatterns: ['node_modules/(?!(vue-full-calendar)/)']
}

In my case my src files are several directories under the opened workspace folder in vs code. This is because its an enterprise application with multiple project modules. I am providing absolute paths to both jest.pathToConfig and jest.pathToJest. These paths are on a different partition (F:)/dual boot shared drive then the installed vs code (C:). I dont think this should have an impact though.

"jest.autoEnable": true,
"jest.debugMode": true,
"jest.pathToConfig": "F:/dev/win/Workspaces/trunk/src/DCATS.Web/jest.config.js",
"jest.pathToJest": "F:/dev/win/Workspaces/trunk/src/DCATS.Web/node_modules/.bin/jest"

Interesting that after the --watch fails to start manually starting the jest runner clicking debug on an individual test breaks inside my custom babel config.js even with the above vue-jest babel config.

[apaatsio]

Related Jest issue: facebook/jest#9430