Incompatibility with Prettier v3

[threepipes]

Reproduction and the test result

https://github.com/threepipes/vue-jest-prettier-issue

What happened?

The jest test passes with prettier v2.8.8 but fails when updated to v3.0.0 or higher.

Description

prettier is invoked here through the compiler-sfc, but compiler-sfc doesn't impose any version restriction on prettier, whereas component-compiler-utils does. With the release of prettier v3, the interface has changed. As a result, vue-jest fails to transform .vue files properly.

Error

$ npm test

> [email protected] test
> jest --no-cache test.js

 FAIL  ./test.js
  ● Test suite failed to run

    TypeError: Expected a SourceNode, string, or an array of SourceNodes and strings. Got [object Promise]

      1 | import { mount } from '@vue/test-utils'
    > 2 | import Basic from './components/Basic.vue'
        | ^
      3 |
      4 | test('processes .vue files', () => {
      5 |   const wrapper = mount(Basic)

      at SourceNode_add [as add] (node_modules/source-map/lib/source-node.js:178:11)
      at Object.require (test.js:2:1)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        1.276 s
Ran all test suites matching /test.js/i.
zsh: exit 1     npm test

Workaround

The issue can be avoided by modifying the Jest configuration settings as shown below:

{
  "jest": {
    "globals": {
      "vue-jest": {
        "templateCompiler": {
          "prettify": false
        }
      }
    }
  }
}

https://github.com/vuejs/component-compiler-utils/blob/82a37174990e31eaec609887a0ec262f06b454dd/lib/compileTemplate.ts#L175

[PerpetualWar]

Oh this is gold, spent days on this.

[thibaudszy]

Thanks @threepipes for posting the solution. I also struggled to find the cause of the issue.

The straightforward solution is to simply not prettify the compilation output when processing the template. @lmiller1990, is there a use case for it in the context of this plugin? If not I'm happy to submit a PR to change this behavior (like this).

[lmiller1990]

I guess the main reason to do this is for better stack traces/error messages. Although broken out of the box is definitely not ideal... should we just default to having prettier off? Any way to fix this so it works out of the box with formatting?

[thibaudszy]

I reproduced the issue on this repo and tried to see what benefits the formatting with prettier brings by using Prettier 2 and making the test fail. With and without Prettier, the output is the same:

If I force an error in the template, then I can see an error in the output (location in the proxy render):

With Prettier:

Without Prettier:

But I don't know if this is helping a lot. Is it possible to analyse the compiled template in case of failure?

All this to say, offering the possibility to prettify the output of the template compiler might be unnecessary. If that's the case we can just solve the issue by always passing prettify:false to the compileTemplate function.