Jest: Custom module file extension leads to module file not being transformed by babel (? -> SyntaxError: Unexpected token import)

[fkretzer]

File extension ".jsxm" leads to -> Error:

  ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest {import React from "react";
                                                                                         ^^^^^^
  SyntaxError: Unexpected token import

  at transformAndBuildScript (node_modules/jest-runtime/build/transform.js:316:10)
  at Object.<anonymous> (src/test/js/OwnerList.test.js:3:44)

works with file extension changed to ".jsx"

config:

"jest": {
    "testRegex": ".*/src/test/js/.*(js|jsx|jsxm)$",
    "moduleFileExtensions":["js", "jsx", "jsxm", "node"],
    "globals": {
      "__DEV__": true
    }
  }

Debug output:

jest version = 17.0.3
test framework = jasmine2

config = {
  "testRegex": ".*/src/test/js/.*(js|jsx|jsxm)$",
  "moduleFileExtensions": [
    "js",
    "jsx",
    "jsxm",
    "node"
  ],
  "globals": {
    "__DEV__": true
  },
  "rootDir": "/Users/fkretzer/development/mayycon",
  "name": "-Users-fkretzer-development-mayycon",
  "setupFiles": [
    "/Users/fkretzer/development/mayycon/node_modules/babel-polyfill/lib/index.js"
  ],
  "testRunner": "/Users/fkretzer/development/mayycon/node_modules/jest-jasmine2/build/index.js",
  "transform": [
    [
      "^.+\\.jsx?$",
      "/Users/fkretzer/development/mayycon/node_modules/babel-jest/build/index.js"
    ]
  ],
  "usesBabelJest": true,
  "automock": false,
  "bail": false,
  "browser": false,
  "cacheDirectory": "/var/folders/4s/fxh3gr8120l_yfqb1r4lc3bh0000gn/T/jest",
  "coveragePathIgnorePatterns": [
    "/node_modules/"
  ],
  "coverageReporters": [
    "json",
    "text",
    "lcov",
    "clover"
  ],
  "expand": false,
  "haste": {
    "providesModuleNodeModules": []
  },
  "mocksPattern": "__mocks__",
  "moduleDirectories": [
    "node_modules"
  ],
  "moduleNameMapper": {},
  "modulePathIgnorePatterns": [],
  "noStackTrace": false,
  "notify": false,
  "preset": null,
  "resetMocks": false,
  "resetModules": false,
  "snapshotSerializers": [],
  "testEnvironment": "jest-environment-jsdom",
  "testPathDirs": [
    "/Users/fkretzer/development/mayycon"
  ],
  "testPathIgnorePatterns": [
    "/node_modules/"
  ],
  "testURL": "about:blank",
  "timers": "real",
  "transformIgnorePatterns": [
    "/node_modules/"
  ],
  "useStderr": false,
  "verbose": null,
  "watch": false,
  "cache": true,
  "watchman": true
}

[edvinerikson]

I think you need a custom transform regxp. the current one only transforms .js and .jsx.
^.+\\.jsx?(xm)?$ should work for .js, .jsx and .jsxm

[fkretzer]

That did the trick. Thanks! Maybe the generated transform regexp should be based on the "moduleFileExtensions" config property?

[edvinerikson]

yeah that sounds like a good idea.
however problems might occur if you then add extensions for pictures, css files etc. then Jest would try to transform those files as well. "moduleFileExtensions":["js", "png", "css"],
cc @dmitriiabramov

[aaronabramov]

yeah. i think those should be separate configs, it would be hard to autogenerate default value based on module extensions

[fkretzer]

Just in case some runs into the same problem:
Using a custom transform regex (and a custom file extension) with the transform function from babel-jest does not work because of this line:
babel.util.canCompile(filename) only allows the following extensions by default canCompile.EXTENSIONS = [".js", ".jsx", ".es6", ".es"]
So just roll your own transformer as described here: https://facebook.github.io/jest/docs/tutorial-react.html#custom-transformers