Install `@testing-library/vue` by default instead of `@vue/test-utils`

[Robin-Hoodie]

What problem does this feature solve?

In the official documentation on testing, the following is mentioned when suggesting the 2 libraries that can be used for testing:

Vue Test Utils is the official low-level component testing library that was written to provide users access to Vue specific APIs. If you are new to testing Vue applications, we would recommend using Vue Testing Library, which is an abstraction over Vue Test Utils.

The recommendation for new users is to use @testing-library/vue.
However, @vue/cli-plugin-unit-jest doesn't actually install @testing-library/vue, but @vue/test-utils

I find it to be unintuitive that despite the recommendation, the more low-level (and "harder to use") alternative is installed by default.

It's probably not a good idea to install both by default, but if we have to pick one, @testing-library/vue seems like the obvious choice to me.

The users who would be more likely to go with @vue/test-utils instead, are more likely to be more experienced, and will have a better understanding of the alternatives.

What does the proposed API look like?

Change

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

Line 15 in 82aef12

'@vue/test-utils': isVue3 ? '^2.0.0-0' : '^1.0.3'

to add @testing-library/vue instead

Happy to open a PR on this myself

[haoqunjiang]

Yeah, it would be great to use an easier-to-use testing library by default. But I have zero experience with it. So any PR is very welcome!

[Robin-Hoodie]

I just noticed that @testing-library/vue doesn't have support for Vue 3 yet

It's probably best to keep the current behaviour then until that is supported

[afontcu]

Hi! Vue Testing Library maintainer here. 👋

We're still ironing out our integration with Vue 3, but we're almost there. I'll keep an eye on this issue and ping you back when VTL for Vue 3 is marked as stable.

It's probably not a good idea to install both by default

Actually Vue Testing Library relies on Vue Test Utils, so you might end up with both libraries installed under the hood (even though you might only want to use VTL 😄)

Thanks!

[rfgonzalezweb]

What do you guys recommends for testing for now?

I'm using Laravel + Inertia + Vue 3 and I can't make testing with Jest to work.

I keep getting errors that leads to version issues like:

SyntaxError: Cannot use import statement outside a module

[curtisblackwell]

@rfgonzalezweb This may be too late, but if you create a babel.config.js, that'll likely solve that problem for you.

module.exports = {
    presets: [["@babel/preset-env", { targets: { node: "current" } }]],
};