Testing vue-cli javascript components with jest and yarn: nearest does not work

[doits]

To run jest in vue-cli apps, one cannot use jest directly (see explanation):

Note that directly running jest will fail because the Babel preset requires hints to make your code work in Node.js, so you must run your tests with vue-cli-service test:unit.

To make this a little bit more complicated, I use yarn for my dependency management. This means to run tests I have to do:

yarn test:unit [jest options]

I configured vim-test to do this:

let test#javascript#jest#executable = 'yarn test:unit'

But the problem is that the jest script passes -- explicitly as a command line arg. For example the resulting command run is:

yarn test:unit --no-coverage -t '^ApplicationForm\.vue test descriptions$' -- tests/unit/components/ApplicationForm.spec.js

This unfortunately tests the whole file tests/unit/components/ApplicationForm.spec.js, not only the example I wanted to run. The reason is:

yarn outputs this warning:

Warning From Yarn 1.0 onwards, scripts don't require "--" for options to be forwarded. In a future version, any explicit "--" will be forwarded as-is to the scripts.

It seems to ignore everything before the two dashes --, so in fact it runs:

yarn test:unit tests/unit/components/ApplicationForm.spec.js

When I remove the two dashes -- manually, it works like expected (and yarn does not output a warning):

yarn test:unit --no-coverage -t '^ApplicationForm\.vue test descriptions$' tests/unit/components/ApplicationForm.spec.js

The general questions are:

• Do you want to detect a vue-cli app and yarn automatically in this case and do everything right automatically without configuration? A starting point could be to search for @vue/cli-plugin-unit-jest in package.json to detect the use of jest in combination with vue-cli and a yarn.lock for yarn
• If not, is adding a config option to the jest test runner to not add those two dashes -- an option? (this would simply solve my problem at least)
• How can this scenario be handled in a neat way?

[codeinabox]

Thank you for raising this issue, all solid suggestions. I just had a look at https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-unit-jest and I can see it introduces a command vue-cli-service test:unit so I reckon it would be best that if the package is present in the package.json it switches to that command. Feel free to raise a PR or I am happy to do so as I am between projects this week.

[doits]

it introduces a command vue-cli-service test:unit so I reckon it would be best that if the package is present in the package.json it switches to that command

yes, this can be used, too, but then one must also consider that it might not be available globally (or it has a different version globally). So it must be run either with yarn run vue-cli-service test:unit or with ./node_modules/.bin/vue-cli-service.

Just that you know there is also vue-cli-service test:e2e for files inside tests/e2e. The others are in tests/unit. So actually it must decide on the file location which one is the correct command to run ...?

Feel free to raise a PR or I am happy to do so as I am between projects this week

Currently I'm a little bit under stress, so I won't make it until next week. If you have the time I'd be glad if you could do it, otherwise I do it next weeks.

[dimroc]

Hi all, the vue-cli-service is deprecated and in maintenance mode. The recommended practice is to now use vitest through yarn test:unit:

  "scripts": {
    "test:unit": "vitest",

Further reading: https://cli.vuejs.org/guide/cli-service.html

Any suggestions on a quick fix by overriding a vim variable?

[dimroc]

Answering my own question, I did the following to get it working:

let g:test#javascript#runner="vitest"

and everything worked.

  RUN  v1.5.2 /Users/dimroc/workspace/ponds/rails/app/javascript

  ✓ views/HomeView.spec.js (1)
    ✓ HelloWorld (1)
      ✓ renders properly

  Test Files  1 passed (1)
  │    Tests  1 passed (1)
  │ Start at  20:07:42