12

I'm having a problem when running jest test. I'm getting an import unexpected identifier

I have already tried by cleaning npm cache and installing npm babel jest, polyfill, preset-es2015. I've also read this trying some different configs here and there.

This is my babel.config.js

module.exports = {
  presets: [
    '@vue/app'
  ],
  env: {
    test: {
      plugins: [
        "transform-strict-mode",
        "transform-es2015-modules-commonjs",
        "transform-es2015-spread",
        "transform-es2015-destructuring",
        "transform-es2015-parameters"
      ]
    }
  }
}

and my jest config in package.json 

"jest": {
    "moduleFileExtensions": [
      "js",
      "json",
      "vue"
    ],
    "transform": {
      "^.+\\.js$": "babel-jest",
      ".*\\.(vue)$": "vue-jest"
    },
    "moduleNameMapper": {
      "^@/(.*)$": "<rootDir>/src/$1"
    }
  }

Here is the error.

Test suite failed to run

    PCROUTE\Test.test.js:3
    import _interopRequireDefault from "PCROUTE\\node_modules\\@babel\\runtime-corejs2/helpers/esm/interopRequireDefault";
           ^^^^^^^^^^^^^^^^^^^^^^

    SyntaxError: Unexpected identifier

I'm expecting to pass the test but I'm getting that error message. I think the problem comes with the env part in the babel.config.js

Edit: I'm also using windows 7, and I this can be causing those back and forward mixed slashes.

Edit2: I just tested it in Linux and it doesn't work. I have all in forward slashes

 PCROUTE/src/tests/Test.test.js:3
    import _interopRequireDefault from "PCROUTE/node_modules/@babel/runtime-corejs2/helpers/esm/interopRequireDefault";
           ^^^^^^^^^^^^^^^^^^^^^^

    SyntaxError: Unexpected identifier

      at ScriptTransformer._transformAndBuildScript

Edit 3: I saw a lot of people fixed it with [these lines](https://github.com/vuejs/vue-cli/issues/1879#issuecomment-409872897).

transformIgnorePatterns: [
    "node_modules/(?!(babel-jest|jest-vue-preprocessor)/)"
  ]

in the jest config file. I added them and ran this ./node_modules/jest/bin/jest.js --clearCache but it doesn't work.

Edit 4: I just added a couple of things to my jest file. And deleted a couple in my babel file, and now I'm getting. Unexpected String

NEW JEST FILE

module.exports = {
    moduleFileExtensions: [
      'js',
      'jsx',
      'json',
      'vue'
    ],
    transform: {
      '^.+\\.vue$': 'vue-jest',
      '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
      '^.+\\.jsx?$': 'babel-jest'
    },
    transformIgnorePatterns: [
      '/node_modules/'
    ],
    moduleNameMapper: {
      '^@/(.*)$': '<rootDir>/src/$1'
    },
    snapshotSerializers: [
      'jest-serializer-vue'
    ],
    testMatch: [
      '**/tests/**/*.test.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
    ],
    testURL: 'http://localhost/',
    watchPlugins: [
      'jest-watch-typeahead/filename',
      'jest-watch-typeahead/testname'
    ]
  }

And I deleted everything from my babel file except the presets: @vue/app part.

Here is the new error I'm getting.

({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import "core-js/modules/es6.array.find";
                                                                                                    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

    SyntaxError: Unexpected string
Jalil
  • 1,167
  • 11
  • 34
  • what is the command you are using to run the test – SoWhat May 20 '19 at 09:46
  • ```npm test``` which runs ```jest``` – Jalil May 20 '19 at 09:47
  • have you added babel-jest. Also post jest.config.js – SoWhat May 20 '19 at 09:50
  • It's there already, yes, I've added it – Jalil May 20 '19 at 09:54
  • `"PCROUTE\\node_modules\\@babel\\runtime-corejs2/helpers/esm/interopRequireDefault"` I noticed you have mixed backslashes and forward slashes, did you look into that? IF not, the Jest config `transform` and `moduleNameMapper` seem to cause the inconsistency – DSCH May 21 '19 at 05:25
  • Should I use backslashes or forward slashes then? – Jalil May 21 '19 at 06:42
  • I have read a lot about that, and it should be [fixed by now](https://github.com/facebook/jest/commit/aa9790db9bd03a154684574928120e9ee0fb4c8e) – Jalil May 21 '19 at 07:49
  • Not sure about your OS but I would say try both and see if it helps – DSCH May 21 '19 at 10:13
  • I just tested it in linux and I have the same error but with forward slashes only – Jalil May 21 '19 at 12:09
  • Are you sure the env is set to `test`? console `process.env.NODE_ENV` in `babel.config.js` and check once? looks like babel plugins are not being applied. Also try running `NODE_ENV=test npm test` and see if it works. – Ganapati V S May 21 '19 at 12:19
  • @GanapatiVS I just tried with `NODE_ENV=test npm test` and it doesn't work. But what do you mean by env is set to test? And how do I console in babel.config.js? – Jalil May 21 '19 at 12:24

1 Answers1

3

After days of struggling with this. I ended up by answering my question. Here I leave all my config files.

jest.config.js

process.env.VUE_CLI_BABEL_TARGET_NODE = true;
process.env.VUE_CLI_BABEL_TRANSPILE_MODULES = true;

module.exports = {
    moduleFileExtensions: [
      'js',
      'jsx',
      'json',
      'vue'
    ],
    transform: {
      '^.+\\.vue$': '<rootDir>/node_modules/vue-jest',
      '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
      '^.+\\.jsx?$': 'babel-jest'
    },
    transformIgnorePatterns: [
      '/node_modules/'
    ],
    moduleNameMapper: {
        '^@/(.*)$': '<rootDir>/src/$1'
    },
    snapshotSerializers: [
      'jest-serializer-vue'
    ],
    testMatch: [
      '**/tests/**/*.test.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
    ],
    testURL: 'http://localhost/',
    watchPlugins: [
      'jest-watch-typeahead/filename',
      'jest-watch-typeahead/testname'
    ]
  }

babel.config.js

module.exports = {
  presets: [
    '@vue/app'
  ]
}

NOTES

  • I needed to add babel core bridge to be able to use @babel/core with vue-jest
  • It's recommended to clear jest's cache after changing the file
Jalil
  • 1,167
  • 11
  • 34