Starter unit test fails when creating a Vue 3 project with TypeScript and Jest

[adarean5]

Version

4.5.0

Reproduction link

https://github.com/adarean5/vue3-ts-jest

Environment info

System:
    OS: Windows 10 10.0.19041
    CPU: (12) x64 AMD Ryzen 5 3600 6-Core Processor
  Binaries:
    Node: 12.18.3 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 6.14.6 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 84.0.4147.89
    Edge: Spartan (44.19041.1.0), Chromium (84.0.522.40)
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

Run the test:unit script

What is expected?

The starter unit test (/tests/unit/example.spec.ts) should pass with output similar to:

 PASS  tests/unit/example.spec.ts
  HelloWorld.vue
    √ renders props.msg when passed (16ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        1.673s
Ran all test suites.

Process finished with exit code 0

What is actually happening?

Running test:unit produces the following:

 FAIL  tests/unit/example.spec.ts
  ● Test suite failed to run

    C:\Users\Jernej\Documents\Dev_playground\vue3-ts-jest\src\components\HelloWorld.vue:19
    import { toDisplayString as _toDisplayString, createVNode as _createVNode, createStaticVNode as _createStaticVNode, openBlock as _openBlock, createBlock as _createBlock
 } from "vue";
    ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      1 | import { shallowMount } from "@vue/test-utils";
    > 2 | import HelloWorld from "@/components/HelloWorld.vue";
        | ^
      3 | 
      4 | describe("HelloWorld.vue", () => {
      5 |   it("renders props.msg when passed", () => {

      at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
      at Object.<anonymous> (tests/unit/example.spec.ts:2:1)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        3.456s
Ran all test suites.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! vue3-ts-jest@0.1.0 test:unit: `vue-cli-service test:unit`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the vue3-ts-jest@0.1.0 test:unit script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Jernej\AppData\Roaming\npm-cache\_logs\2020-07-25T14_46_08_108Z-debug.log

Process finished with exit code 1

---

This project was created with the following options selected:

? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, PWA, Router, CSS Pre-processors, Linter, Unit
? Choose a version of Vue.js that you want to start the project with 3.x (Preview)
? Use class-style component syntax? No
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save, Lint and fix on commit
? Pick a unit testing solution: Jest
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files

I tried creating a new project with the same settings but with either Vue version 2 or JavaScript instead of TypeScript and they both seem to work.

I tried to apply fixes from what seems like a related issue (#1584) but sadly none of them worked.

[haoqunjiang]

/cc @lmiller1990 @JessicaSachs

I'm not sure but it looks like a vue-jest bug.

[lmiller1990]

Hm, vue-jest, the latest version of test utils and TS definitely do work together, I made a repo that illustrates this here.

I was able to reproduce this following the above steps. I then created a new project and chose not to use babel alongside TS and it worked fine. I think the problem is related to the babel transpilation running after the TS compilation step (maybe the @vue/cli-plugin-typecript-babel-preset)?

In the past, when I saw this error (but in a different context, not a vue-cli project, but I was using jest), I had to provide the @babel/preset-env to with babel get everything working. 🤔

If you just want everything to work @adarean5, you can install the awesome ts-jest preset and setting your preset to ts-jest in jest.config.js. This worked for me.

I wonder if we can just use ts-jest as the preset by default in the Jest cli plugin. @sodatea what do you think? The ts-jest preset seems to work great for both TS and regular JS.

[haoqunjiang]

@vue/cli-plugin-babel/preset do have enabled module transpilation though.

vue-cli/packages/@vue/cli-plugin-unit-jest/index.js

Lines 13 to 15 in f99079c

	process.env.VUE_CLI_BABEL_TARGET_NODE = true
	process.env.VUE_CLI_BABEL_TRANSPILE_MODULES = true
	require('jest').run(rawArgv)

vue-cli/packages/@vue/babel-preset-app/index.js

Lines 221 to 227 in f99079c

	if (process.env.VUE_CLI_BABEL_TRANSPILE_MODULES) {
	envOptions.modules = 'commonjs'
	if (process.env.VUE_CLI_BABEL_TARGET_NODE) {
	// necessary for dynamic import to work in tests
	plugins.push(require('babel-plugin-dynamic-import-node'))
	}
	}

I don't know how to debug a Jest transformer but it seems vue-jest failed to pick up this babel config.

[lmiller1990]

It does seem that way. Maybe finding the babel config is not working in the latest version of vue-jest (5.0.0-alpha something). It has not been tested very thoroughly yet, except when using ts-jest as the preset.

What do you think about using ts-jest as the default preset (at least for TS users?) This seems to make sense.

[haoqunjiang]

I think the bug may reside here https://github.com/vuejs/vue-jest/blob/e0cbca7920e3afca3bd333377a4e463b57631e66/lib/transformers/typescript.js#L29-L45

A babel config was found so no inline options were applied, but the project babel config did not take effect either.

[haoqunjiang]

We have both typescript and typescript-and-babel presets https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-unit-jest/presets

Babel was required in many circumstances because of the need for modern mode, auto polyfill injection, and JSX, etc.

[lmiller1990]

Hm, I wonder why this wasn't a problem in the past. That part of vue-jest has not changed. The new SFC compiler, @vue/compiler-sfc, transforms to import/export syntax - perhaps the old one, vue-template-compiler was transforming to require syntax, so that is why no-one noticed.

I made an issue in vue-jest to also track this: vuejs/vue-jest#258

[lmiller1990]

Interestingly enough digging into the preset we are using, if you commented out babelConfig: true it solves the problem, so the issue is definitely somewhere in vue-jest relating to babelConfig.

Actually, maybe not: the babelConfig option is a ts-jest thing. 🤔

I will continue investigating. Maybe ts-jest master @ahnpnl has some pointers on exactly the babelConfig: true option does in ts-jest?

[adarean5]

Hm, vue-jest, the latest version of test utils and TS definitely do work together, I made a repo that illustrates this here.

I was able to reproduce this following the above steps. I then created a new project and chose not to use babel alongside TS and it worked fine. I think the problem is related to the babel transpilation running after the TS compilation step (maybe the @vue/cli-plugin-typecript-babel-preset)?

In the past, when I saw this error (but in a different context, not a vue-cli project, but I was using jest), I had to provide the @babel/preset-env to with babel get everything working. 🤔

If you just want everything to work @adarean5, you can install the awesome ts-jest preset and setting your preset to ts-jest in jest.config.js. This worked for me.

I wonder if we can just use ts-jest as the preset by default in the Jest cli plugin. @sodatea what do you think? The ts-jest preset seems to work great for both TS and regular JS.

Thank you for the reply and for providing a temporary solution.
The issue might also be related to #5712 . I remember getting that same message when running the start command.

[lefreet]

a mistake when install @vue/cli-plugin-unit-jest@4.5.0

▶ npm i @vue/cli-plugin-unit-jest@4.5.0
npm ERR! code ETARGET
npm ERR! notarget No matching version found for @vue/cli-plugin-unit-jest@4.5.0.
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/shun/.npm/_logs/2020-07-29T06_19_36_580Z-debug.log

somethine wrong when publish ?

@sodatea