Replace Karma + Mocha with Jest

[eddyerburgh]

• Replace Karma and Mocha with Jest

I've added alias resolving when running tests with babel-plugin-module-resolver

I've omitted src/main.js and src/router/index.js from test coverage because I don't think we should encourage testing of those files

This implements part of this issue - #817

The next part is to add vue-test-utils, which I'll do when it's published.

[johnsardine]

I support this PR, however the coverage report is very poor.

I also tried to implement Jest here johnsardine/vue-jest and the coverage is a little better, however not perfect. I would like you to take a look, if you can.

I have a fork of jest-vue-preprocessor which provides babel sourcemap to jest-transform.

I think the coverage should be fixed before this is accepted.

On my test, the coverage is off by one line, and this affects the sourcemap on the browser as well. I think the issue must come from the map that babel generates from the extracted .vue file script.

Example of coverage in pure js file vs .vue file

You can see the coverage execution count is off by one line. It should be one line above.

I have put some hours into this without any progress other than the one I report here. I'll have to continue trying.

[eddyerburgh]

Yeah you're right, we should get correct source mapping before merging.

As you said, jest-vue-preprocessor doesn't return a map or have any logic to produce one. I'm going to play around with the vueify code and jest.

[johnsardine]

@eddyerburgh Take a look at my fork of jest-vue-preprocessor, I've added (not in the best way, I admit) support for sourcemaps from babel. The thing is, the sourcemap is alright, but the coverage report is one line off, and it affects the source map on the web as well (So maybe the sourcemap is not alright after all)

[rit]

Is jest's license the same as the React's license? If it is, what is the implication?

[matt-oconnell]

@rit Unfortunately, it is. Although there is an open issue to discuss removing it here.

[michalsnik]

Great idea @eddyerburgh I was about to prepare the same PR :D It's a great step forward, jest simplifies whole unit testing process drastically 🚀

@rit This so called React's license main purpose is to protect themselves from patent trolls that are suing them for crazy amounts of money each month. Dan explained it recently on twitter and I don't think we should consider it a blocker..

[eddyerburgh]

Before we merge we need to create a vue jest preprocessor that adds correct source mapping. There are plans for an official preprocessor, but I'm not sure how long it will be until it is published

[eddyerburgh]

@johnsardine I've created a vue jest preprocessor that adds source maps - https://github.com/eddyerburgh/jest-vue. I tried to add to vire's existing library, but found it easier to create a fresh repo.

In light of the patent drama, are we still happy to go ahead with replacing Karma and mocha with Jest?

[johnsardine]

@eddyerburgh This is great, thanks a lot. I was testing it in my vue-jest sample project and so far seems to be working great. Will update a bigger project this week, if I encounter any issues I'll give you more feedback.

[eddyerburgh]

Are people happy for me to fix conflicts and get this branch merged? @LinusBorg

[LinusBorg]

yes!

[eddyerburgh]

conflicts fixed 👷

[eddyerburgh]

I think this PR is ready to merged. If anyone would like to test and give feedback it would be really useful 😀

[chlab]

I justed re-inited my project with the updated template and it looks like the issues I encountered the first time around are all solved 👏 Thanks @eddyerburgh

[LinusBorg]

I found a few things, see above.

I also switched the base branch to "develop" since I already collected a few other changes there to release together.

Can you rebase the whole branch onto that latest "develop" branch?

[LinusBorg]

@eddyerburgh Since we are leaving the karma setup available, I don't think we should remove this docs section.

We should rather leave that docs in, but prepend the page with new infos about jest.

[LinusBorg]

shouldn't that be {{#if_eq runner "jest"}}?

[LinusBorg]

You seem to have some leftovers from an older merge conflict...

[LinusBorg]

since we are leaving the karma/mocha setup in place, the eslint config should probably also leave this in.

It should be conditional:

{
  "env": {{{#if_eq runner "karma"}}
    "mocha": true{{/if_eq}}{{#if_eq runner "jest"}}
    "jest"{{/if_eq}}
  }{{#if_eq runner "karma"}},
  "globals": {
    "expect": true,
    "sinon": true,
    "jest": true
  }{{/if_eq}}
}

[LinusBorg]

Hm, that merge doesn't look like it's supposed to I think ... the webpack-dev-server is new in the developbranch, while yours was still built on the old dev-server - so the former should stay in and the latter should go out.

Similarly, the other additions to package.json down in this file are all "bringing back" dependencies of the old dev-server.

But we might simply resolve this during / after the merge ..

[LinusBorg]

Thanks for the hard work on this @eddyerburgh

[gkatsanos]

what's missing from https://github.com/vuejs/vue-test-utils/ to consider it non-beta?

[LinusBorg]

That's probably a question to ask the team working on that repository.