Vue CLI plugin to add Jest test runner doesn't transpile .js files

问题

Just a quick disclaimer, I cannot reproduce this on another project, which is why I'm here instead of making an issue on the Github.

Issue

So a quick demo project I made to show a co-worker how to use the Vue test utils, went off the wagon. It doesn't get picked up in the transform part of the jest.config.js.

I made the project with the Vue CLI, using vue create demo-project choosing ESlint and Babel, then running vue add @vue/cli-plugin-unit-jest. Everything went fine, I committed, ran the test command and everything went fine.

So we started testing snapshots, and everything was fine. Next day, come back to the project to keep going, and this is the error I get.


> vue-jest@0.1.0 test:unit .../demo-projects/vue-jest
> vue-cli-service test:unit

 FAIL  tests/unit/example.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:

    .../demo-projects/vue-jest/tests/unit/example.spec.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { shallowMount } from '@vue/test-utils';
                                                                                                    ^

    SyntaxError: Unexpected token {

      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:        1.163s
Ran all test suites.
npm ERR! code ELIFECYCLE
npm ERR! errno 1

Just running the normal npm run test:unit results in the example.spec.js that comes with the test utils is not babel'ed, and fails in the Node test environment.

Attempted Solutions

Did not work

Deleting node_modules and reinstalling
Deleting package-lock.json, in addition to the above step ( separately done )
Reverting back to the commit when it was working
Checking out to a different branch, deleting all the files that vue add @vue/cli-plugin-unit-jest added, then running the command again to re-create all the files
- jest.config.js
- tests/ - and all it's files

Worked

Pretty clear what's happening, so in the jest.config.js file, I added the .js file under the transform field.

transform: {
    '^.+\\.vue$': 'vue-jest',
    '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
    '^.+\\.(js|jsx)?$': 'babel-jest' // added .js
  },

This solution solves the problem, and properly transforms the example.spec.js

Attempted Recreation

I tried to see if this was a bug by creating another project, running the same steps and it worked just fine. I even copied and pasted all the files from the broken one to the new one, looking for differences in git. It was exactly the same. Which is why I thought it might be node_modules, but it still didn't work.

Uhh

Hopefully this isn't a waste of time for anyone reading since it's not truly a problem. I mainly wanted to have it for anyone who might have the same issue to see that adding the .js extension would solve the problem without having to start over, but also curious if anyone has insight on why this might be happening?

来源：https://stackoverflow.com/questions/56993336/vue-cli-plugin-to-add-jest-test-runner-doesnt-transpile-js-files

标签

unit-testing

Vue.js

jestjs

vue-cli