In the project I’m working on, I was given the task of investigating how to integrate Vue.js with our existing Rails app. So I started reading the official guide, watching tutorials and reading various posts until I finally got a fully working Vue component.
Finally it was time to write some tests, but unfortunately, the Webpacker gem doesn’t include testing configuration, so I had to do it on my own.
To my surprise, I found that there wasn’t much documentation on how to do the setup. So I figured I’d make this post to share with you how I managed to eventually get it working.
1. Install Jest
To install Jest all you have to do is run
yarn add --dev jest from the root of your project. Then, add a test script to your
1 2 3 4 5 6 7
Now you can run your tests with
2. Define the location of your tests
If you try to run
yarn test at this point, you’ll see that
config/webpack/test.js failed. This is because of the way Jest looks for test files in the project. It basically executes all files matching
.test.js in the whole project. In this case, the file matched
*.test.js so it tried to run it as a test.
Since we don’t want the Webpack config file as well as other files in the project that meet this criteria to run with our tests, we need to tell Jest where to look for them.
In my case since I’m using Rspec, I decided to point it to the
To do this you just have to add roots to your
1 2 3 4 5
To verify it worked, you can create a
1 2 3
yarn test again and you should see a green “PASS” in the output meaning that it worked 🎉.
3. Babel to the rescue
Now that we got our first test working, let’s take it one step further and try to test a Vue component.
The first thing you’d probably try is to create a file under the
my_component.spec.js. Then try to import your component from within your spec with the import statement like:
If you did try this, go ahead and run your tests. You’ll see a
SyntaxError: Unexpected token import in the output.
The problem here is that
import is part of ECMAScript 6, so we need the help of a transpiler such as Babel.
To get it working you need to install two packages by running
yarn add --dev babel-jest babel-preset-es2015 and add the “es2015” preset to your
1 2 3 4
If you want to take it one step further, you can add moduleDirectories to your
.package.json so you don’t have to type out the full path to your modules:
1 2 3 4 5 6 7
So what we had before as
can now be written as
4. Where’s Vue?
If you followed every step, you should be getting a
SyntaxError when trying to run your tests. This means that it successfully imported your component, but it can’t yet understand
.vue file’s format.
Fortunately, we have a package that will take care of it for us, vue-jest. So go ahead and run
yarn add --dev vue-jest along with adding “moduleFileExtensions”, “transform” and “mapCoverage” as explained in the README. Your
package.json should look something like this:
1 2 3 4 5 6 7 8 9 10 11 12 13
With moduleFileExtensions we no longer need the
.vue when importing Single File Components. So what we had before as
can now be written as
You should now be able to use
The rules in the transform section indicate which package is responsible for the transformation of testing files. In our case, we want
vue-jest to handle all our
mapCoverage is set in order to use source maps that the transformer emits. Jest will use them to try and map code coverage against the original source code when writing reports and checking thresholds.
Lastly, let’s add the official unit testing utility library for Vue, vue-test-utils. Just run
yarn add --dev @vue/test-utils and you are good to go.
You can now start writing tests for your Vue components 🎉