Vue-test-utils: DOC needs update

[maicss]

What problem does this feature solve?

1, document confits

use @vue/cli create a project, it contains a babel.config.js file

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

doc https://vue-test-utils.vuejs.org/zh/guides/#%E7%94%A8-jest-%E6%B5%8B%E8%AF%95%E5%8D%95%E6%96%87%E4%BB%B6%E7%BB%84%E4%BB%B6 line above babel config :

{
  "presets": [["env", { "modules": false }]],
  "env": {
    "test": {
      "presets": [["env", { "targets": { "node": "current" } }]]
    }
  }
}

how to merge those config?

2, document needs update

code in https://vue-test-utils.vuejs.org/zh/guides/#%E7%94%A8-jest-%E6%B5%8B%E8%AF%95%E5%8D%95%E6%96%87%E4%BB%B6%E7%BB%84%E4%BB%B6 give an error in console and doc API not mark this as deprecated.

console.error
    [vue-test-utils]: isVueInstance is deprecated and will be removed in the next major version.

What does the proposed API look like?

no api

[afontcu]

Hi! Looks like zh docs are not updated, and I'm afraid we'd have a hard time trying to do so 😅 Would you like to help us out with that?

[maicss]

English version doc mark isVueInstance as deprecated in tab API but not guides, and what about babel config setting?

[afontcu]

English version doc mark isVueInstance as deprecated in tab API but not guides

Yeah, that's true. We should replace those examples using deprecated methods. For example: https://vue-test-utils.vuejs.org/guides/#testing-single-file-components-with-jest

what about babel config setting

If you use vue/cli + preset for unit testing, then you are good to go. If you are not and want to add config to an existing project, I assume zh docs are a bit outdated, so they should match the English version. To be honest, though, this section hasn't changed that much and there's a lot of room for improvement.

Can you spot any big differences between the en and the zh version of docs?

[maicss]

My English not that good, so

1, Can you spot any big differences between the en and the zh version of docs?

when I solve my problem, I'll try, and I can contact https://cn.vuejs.org's maintainer, ask their option.

2, babel config

you means there is no need to change my babel config, just use vue-cli generated?

here is the log :

ERROR: [BABEL] unknown: Unknown option: /project/path/node_modules/@vue/cli-plugin-babel/preset.js.overrides. Check out http://babeljs.io/docs/usage/options/ for more information about options.

A common cause of this error is the presence of a configuration options object without the corresponding preset name. Example:

Invalid:
  `{ presets: [{option: value}] }`
Valid:
  `{ presets: [['presetName', {option: value}]] }`

For more detailed information on preset configuration, please see https://babeljs.io/docs/en/plugins#pluginpresets-options. (While processing preset: "/home/kk/homeProject/front/node_modules/@vue/cli-plugin-babel/preset.js")
STACK: ReferenceError: [BABEL] unknown: Unknown option: /home/kk/homeProject/front/node_modules/@vue/cli-plugin-babel/preset.js.overrides. Check out http://babeljs.io/docs/usage/options/ for more information about options.

[lmiller1990]

Keeping translations up to date is a VERY difficult problem. Has anyone found a good solution to this? I know the Vuejs Japan user group get a notification in slack every time the EN core docs are updated and fix the JP ones almost immediately. This is probably one of the reasons Vue is huge in Japan - good, official up oto date docs (no JP version for React docs, for example).

This only works because they have a few dedicated docs people. If anyone is interesting in owning and of our translations, please speak up and we can look into something like this.

[maicss]

how about crowdin ?

[lmiller1990]

Interesting - have you used this? Was is useful? I'll investigate.

[maicss]

I used to translate about 10 pages of material-ui on this site. not a manager or something, cannot give you more advise. for me, I think it's good. it can do the diff of Keeping translations up to date

[maicss]

so, anyone helps me with the babel config?

keep vue/@cli created config or merge your config writed on document?

both those give error i post above

help me please!

[lmiller1990]

I am not super familiar with vue-cli. Can you just try merging them?

{
  "presets": ['@vue/cli-plugin-babel/preset'],
  "env": {
    "test": {
      "presets": [["env", { "targets": { "node": "current" } }]]
    }
  }
}

Give this a try. Or you can try making a new project using vue-cli, then choose "jest" for testing, and it should give you one that works out of the box.

[maicss]

Thanks, this config works. (I think I get some errors may caused by webstorm with WSL2, so i create a new project just on Windows )
but I cannot get all coverage, I push my example to https://github.com/maicss/vue-jest-test-example ,
in this example, i cannot get component HelloWorld.vue coverage.

can you help me with that?
thanks.

if this example works, I think if we put this repository in the doc, will helps newbee like me a lot, do you think so?

[lmiller1990]

This should all work "out of the box" if you create a new project using vue/cli. I am not sure we need to add more config to the docs (already far too much). I don't like documenting config too much, it's different for every project.

Regarding coverage, this is going to depend on the test runner. Is this jest or mocha? Most likely we need to investigate vue-jest if you are using jest and the coverage is incorrect.

[maicss]

I mean add a link.

I use jest, beacuse less config

[lmiller1990]

What I mean if if you run vue create app using the vue-cli and choose "Jest" for your testing framework, this should already work 100% with no config - I don't quite see why your template is different to someone doing that, or why it would be useful to have even more config in the docs - if anything, I think we should reduce config and recommend people use the vue-cli.

Maybe I am misunderstanding something.

[Jinjiang]

Hi everyone, the Chinese translation could be synced through these 2 PRs #1568 and #1573 . And I will keep checking the docs update.

Also I think crowdin probably is an option. But the current workflow is fine for myself. And imo this move needs more discussion in the perspective of all languages, not just for zh.

Thanks.

[maicss]

@lmiller1990 I create vue project with default, and try to add jest test manully. It seems create vue app with test suit is a better idea. Thanks.

But the coverage still blank. I will not foucs on get coverage correct, but if you get this done, notify me, thanks.