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

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 (https://github.com/vuejs/vue-cli/issues/1584) but sadly none of them worked.

[lmiller1990]

Thanks, I should have read the docs 🤦

Anyway, I have found a fix. It looks like in Vue 2.x, the SFC tool (vue-template-compiler) would compile to commonjs. Vue 3.x compiler, @vue/compiler-sfc, does not - it compiles to ES modules. The error in the first post of this issue is actually the compiled template.

The fix is to compile the template using babel. I was using TypeScript’s transpileModule https://github.com/vuejs/vue-jest/blob/e0cbca7920e3afca3bd333377a4e463b57631e66/lib/process.js#L52, see here, which likely is using the tsconfig.json, which is set to module: esnext. Instead, I will just use babel to compile the template (the template is entirely generated by @vue/compiler-sfc, so we don’t really care about types here anyway).

I will ping @sodatea when I have fixed this and we can coordinate to include the latest vue-jest for the cli-plugin.

[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.