I'm currently organising Full Stack Europe. It's a conference in Antwerp, Belgium for developers who want to learn across the stack. You can use this link get your ticket with a nice discount.

Testing a Vue component part 5: Jest awesomeness and a skeleton to get started

Original – by Freek Van der Herten – 3 minute read

Welcome to part 5 of a series on how to test a Vue component.

Here's the table of contents of the series:

  1. Starting out with tests
  2. The first test and snapshot testing
  3. Creating an instance of a component
  4. More tests and faking time
  5. Jest awesomeness and a skeleton to get started (you're here)

Jest watch mode

You know by now that Jest is an amazing testing tools that comes with jsdom and snapshot testing built in. But a thing we haven't touched upon is it's test runner. Typing jest on the command line will make it run all the tests but it can do much more. It has an awesome interactive mode that you can start by jest --watch.

When Jest is in this mode it will run the tests when one of the files in your project changes. You can also press enter to manually trigger a test run. A very cool feature is that you can put a filter on which tests to run by pressing t (or p).

Now when a file changes only the tests containing storage in their name will run. I really wish all test runners (I'm looking at you PHPUnit) had this built in.

Our skeleton repository

Like already mentioned getting started with testing a Vue component was a pain because you need to have a good environment set up. To avoid going to through the same pain again I created a skeleton repo to kickstart Vue component development. Sebastian played a big role is setting all this up just right. This repo is what I'll be using myself when working on the next component.

Here's how you can get started with it:

  1. Clone the repo `git@github.com:spatie/skeleton-vue.git`
  2. Run `rm -rf .git` && `git init` to cut loose the connection to our repo on GitHub
  3. Run `yarn` to pull in the dependencies.
  4. Replace all occurrences of the string mentioned at the top of the readme.

The skeleton already contains an ExampleComponent and a test to make sure that component is working. If you run ./node_modules/.bin/jest you'll see that test is passing.

In closing

Congratulations, you've reached the end of this series. I hope you liked learning all this stuff and that reading all of this make you want to start creating and testing a Vue component of your own. Although starting with testing may be daunting, try to persist and eventually you will be rewarded with progress and results. If you feel like you're stuck ask a colleague or a programming friend for some help.

Stay up to date with all things Laravel, PHP, and JavaScript.

Follow me on Twitter. I regularly tweet out programming tips, and what I myself have learned in ongoing projects.

Every two weeks I send out a newsletter containing lots of interesting stuff for the modern PHP developer.

Expect quick tips & tricks, interesting tutorials, opinions and packages. Because I work with Laravel every day there is an emphasis on that framework.

Rest assured that I will only use your email address to send you the newsletter and will not use it for any other purposes.