vuejs / vue-test-utils-mocha-webpack-example Goto Github PK

This sample project needs to be updated using Vue CLI 3.0 and the latest version of vue-test-utils. It's not clear how to configure mocha webpack to work with the new CLI hidden webpack.config.

Hello there!

I pulled the code, ran npm install and List.vue does not appear in the coverage report files. Is that expected?

 WEBPACK  Compiled successfully in 476ms

 MOCHA  Testing...



  List.vue
    ✓ renders li for each item in props.items

  Message
    ✓ renders props.msg when passed
    ✓ renders default message if not passed a prop

  MessageToggle.vue
    ✓ toggles msg passed to Message when button is clicked


  4 passing (26ms)

 MOCHA  Tests completed successfully

----------------------------|----------|----------|----------|----------|----------------|
File                        |  % Stmts | % Branch |  % Funcs |  % Lines |Uncovered Lines |
----------------------------|----------|----------|----------|----------|----------------|
All files                   |      100 |      100 |      100 |      100 |                |
 Message.js                 |      100 |      100 |      100 |      100 |                |
 MessageToggle.vue?d4b1857c |      100 |      100 |      100 |      100 |                |
----------------------------|----------|----------|----------|----------|----------------|

Does not run with the latest vue-loader. See this issue

When you clone the project "npm run test" works. However if I delete the package-lock.json and perform an "npm i" to reinstall all the modules(a new lock file gets created) I get the following error:

TypeError: Super expression must either be null or a function

I was trying to use this guide to setup mocha based unit tests but was getting errors because I installed the node modules that were needed to run but my own project was throwing that error. As I troubleshooted I ended up finding out it was the package-lock.json file. I think this is important because users will be installing mocha unit testing dependencies and it will not run on their projects.

https://vue-test-utils.vuejs.org/en/guides/testing-SFCs-with-mocha-webpack.html should be https://vue-test-utils.vuejs.org/guides/#testing-single-file-components-with-mocha-webpack

Hello,

I was able to run code coverage to html by changing the test command in my scripts to be:

//package.json
{...
scripts: {
....
"test": "cross-env NODE_ENV=test nyc --reporter=lcov --reporter=text mocha-webpack --webpack-config webpack.config.js --require test/setup.js test/**/*.spec.js"
...
}

and in webpack.config.js changing module.exports.devtool to 'eval' from 'inline-cheap-module-source-map'.

However, when I look at the html coverage it looks like it only covers the Javascript part of the .vue file and not the template:

I noticed this was the vase in vue-test-utils-karma-example as well. I tried running coverage in vue-test-utils-jest-example but all the coverage results are 0% for some reason. Any help would be greatly appreciated! Thanks!

Hi!

I've just cloned repo and ran the tests and all is good when I run npm t. However, I'd like to run using watch mode but when I add the --watch switch to the test command, the first run is good and all 4 tests run but when I update either the code or a spec file, it will only run 1 of the tests from that point forward.

Are others seeing this behavior? Likely an issue in mocha-webpack but I didn't see an open issue in their queue around this. Anyway, I thought I'd report it here first and at least check if others are also seeing.

Thanks!

I have problems generating a correct lcov report using SFC. The source path in lcov.info is wrong.

If I use for webpack devtool: "eval", I get:
SF:C:/src/main/frontend/js/components/VueComponent.vue?vue&type=script&lang=js&

If I use for webpack devtool: "inline-source-map", I get:
SF:C:\src\main\frontend\js\components\js\components\VueComponent.vue

The correct path is actually:
C:\src\main\frontend\js\components\VueComponent.vue

It would be very helpful to have an example using the latest vue-loader.

Hi there, I wanted to try this example, and run npm install.
It replies:
found 195 vulnerabilities (185 low, 5 moderate, 3 high, 2 critical)
Maybe this could be fixed?
Best
Agata

Hello, i run the code, but the test can't pass 100%, this is the error log:

MessageToggle.vue
1) toggles msg passed to Message when button is clicked

3 passing (35ms)
1 failing

1. MessageToggle.vue toggles msg passed to Message when button is clicked:
   Error: [vue-test-utils]: find did not return Component, cannot call hasProp() on empty Wrapper
   at throwError (node_modules_vue-test-utils@1.0.0-beta.11@vue-test-utils\dist\vue-test-utils.js:11:9)
   at ErrorWrapper.hasProp (node_modules_vue-test-utils@1.0.0-beta.11@vue-test-utils\dist\vue-test-utils.js:602:3)
   at Context.it (.tmp\mocha-webpack\1519815705782\webpack:\test\MessageToggle.spec.js:12:1)
   at callFn (node_modules_mocha@3.5.3@mocha\lib\runnable.js:348:21)
   at Test.Runnable.run (node_modules_mocha@3.5.3@mocha\lib\runnable.js:340:7)
   at Runner.runTest (node_modules_mocha@3.5.3@mocha\lib\runner.js:443:10)
   at node_modules_mocha@3.5.3@mocha\lib\runner.js:549:12
   at next (node_modules_mocha@3.5.3@mocha\lib\runner.js:361:14)
   at node_modules_mocha@3.5.3@mocha\lib\runner.js:371:7
   at next (node_modules_mocha@3.5.3@mocha\lib\runner.js:295:14)
   at Immediate. (node_modules_mocha@3.5.3@mocha\lib\runner.js:339:5)