Jest Testing Feedback

[miljan-aleksic]

I have migrated my unit tests to Jest and this is my feedback about it:

1. Webpack is poorly supported, reason I precompile my Apps before testing. Is not a big deal, though.
2. Jest support snapshots, for which to support is simple enough by converting the rendered DOM to JSON. But, it should be nicer if there was some standard way doing this. I guess this rise the idea of creating official testing utils, which is not new if I recall.
3. I think Jest relaunch everything on each test because the message You are running Vue in development mode... rise each time. Is kind of annoying. Vue only rise it on production mode and if inBrowser (if window global variable is defined). Adding a check for 'testing' environment could help solve it, as using the min version is not ideal during testing.

Beside that, I found the experience using Jest satisfactory. From having about 6 heavy testing dependencies now I only have one that gets installed fast. And its watch mode is awesome!

[posva]

@blake-newman Has been testing this as well, he may provide some feedback too

[miljan-aleksic]

I have just discovered jest-vue-preprocessor, which, once @vire merges the PR from @blake-newman, saves the need to use webpack and simplifies the process. Thanks for that!

[blake-newman]

Hey,

Yes been playing around with Jest recently.

The processor needs a little fine tuning, possibly the ability to hook in to apply custom languages.

One issue to highlight is that coverage reports do not currently map back correctly. Been experimenting to get support but it's a little tricky.

Possible if we can provide sourcemap to jest for its internal coverage mechanism. At the moment I don't think it's fully possible, however I could just be missing something.

[miljan-aleksic]

In deed, the preprocessor, even with your updates, is not compiling well. In some components I got missing the entire props definition, for example. Getting back to precompile with Webpack...

I'm not in a need for the coverage at the moment, but anyway, it should be getting better with time. For now, I am satisfied.

[elmariofredo]

@miljan-aleksic: @vire want me to let you know that he is of the keyboard until Thursday so he will take look at that PR when he will get back

[miljan-aleksic]

Ok @elmariofredo, I will check it out once again then and report the issues I found. Thanks!

[blake-newman]

@elmariofredo Thanks for the update. No rush for now @miljan-aleksic you can use an exotic reference to my branch in package.json if you with to test the PR out.

jest-vue-preprocessor: "git+ssh://git@github.com/blake-newman/jest-vue-preprocessor#master"

This exotic reference supports yarn

[miljan-aleksic]

@blake-newman, I know :)

Already tested it and it works but found some new issues which I think is better to address once current changes merged.

[vire]

@blake-newman your PR is merged!

[joezimjs]

I'm running into an issue regarding CSS Modules. When I use the pre-processor for Jest, the $style property isn't getting created, so attempting to render a template breaks because $style is undefined. I haven't found any pre-processor scripts to take care of this, I'm not seeing it in vueify, and I can't reason about vue-loader well enough to determine how to do it from there.

[miljan-aleksic]

@joezimjs, by experience I can say the Vue jest preprocessors are not mature enough. I opted to build pre testing and as running another build while in jest watch mode would trigger the tests to run again, it's pretty good.

[joezimjs]

@miljan-aleksic So how does that work? Does your build include the Jest spec files? If so, how do you set up that webpack config?

[miljan-aleksic]

@joezimjs, I just separate the two steps. First build my package and then use the dist/ files for the testing. You can check a working example in Vuikit next branch. In the tests there is an util file which loads Vue and Vuikit dist directly.

Is not perfect but if want to start experimenting with jest, is a good start.

[joezimjs]

@miljan-aleksic That's completely different from what I'm trying to do. I'm building an application, so my bundled file is a script that runs immediately and doesn't export anything, so just importing the bundle doesn't help me one bit.

[miljan-aleksic]

@joezimjs, you have a build process that on the end returns a script or code you want to test. Firing the build during or before the tests execution, is exactly the same to jest. If your autoexecutable script is testable, then does help you, a lot. If you still think it doesn't, please open a new issue, as it would be unrelated to this topic.

[joezimjs]

@miljan-aleksic The build process returns an entire application. The tests want to test individual pieces of that application which I cannot get access to by importing the bundle.

This does belong in here because it is feedback on testing Vue with Jest. The issue is that .vue files need some sort of processing before it can be used by a script. What's needed is some sort of utility that can fully process a single .vue file and spit out a JavaScript module, like what vue-loader does, except it needs to work outside of webpack, unless there's a way to use webpack to handle individual files and do it without changing the module system.

[miljan-aleksic]

@joezimjs, you can always create a separate build that will return the functions and features you want to test without the in production execution.

Seems you are referencing the jest vue preprocessor.

[joezimjs]

The separate build is definitely not great because I have to create a new entry file that is similar to your lib/index.js file that imports everything that I need to test and then re-exports it. This means I have to edit this file every time I want to test a new file. Seems like it should work, but it also seems like something we shouldn't need to do.

jest-vue-preprocessor works great except it completely ignores the styles section, so CSS Modules break because there is no $style property on the vm.

[miljan-aleksic]

If you are testing your vue components, you should test them separately and isolated, mocking the data and environment. For such, having one index build with all your components, like in Vuikit, would do the job. If you are testing how your entire App behaves, it workflow, etc. perhaps jest and the domjs is not the best tool for the case.

[joezimjs]

You're right, and right now the index build is probably the only way to go, but it's something that shouldn't be necessary. So my feedback for Jest testing is that it's unnecessarily difficult to test .vue components when you are using CSS Modules.

[miljan-aleksic]

Cristian Carlesso just published an awesome post about Jest and Vue. Time to refactor my workflow!

[yyx990803]

Closing as we don't have much actionable items here, but the the community has come up with decent solutions getting the two work together. We will likely have some guide once the official unit test util is published.

[rayrutjes]

We used all the good stuff mentioned here together on our search UI components library: https://github.com/algolia/vue-instantsearch.

I took us some time to put everything together, but working very well now.
the only issue we have so far, is that we need to compile CJS build prior to testing Vue components.

We use Rollup with the Vue pre-processor plugin mentioned in this thread & Jest (with snapshots).

Cristian Carlesso inspired us a lot on our current setup!

[johnsardine]

@rayrutjes Do you have code coverage working for you? Did you happen to encounter the same issues I describe here?