Alex Jover Morales - Testing Vue.js Components with Jest: A concise guide to testing Vue.js components using Jest and the official Vue Test Utils library

Unit testing in modern component-based JavaScript frameworks is not straightforward. You need a test suite that is reliable and runs quickly. Components are connected to one another, and the browser adds a layer of UI, which makes everything inter-dependent while we test components in isolation.

Jest is a fully-featured JavaScript testing framework that will do all your work for you. This book shows you how to test Vue.js components easily and take advantage of the fully-featured Jest testing framework with the aid of practical examples. You'll learn the different testing styles and their structures. You'll also explore how your Vue.js components respond to various tests. You'll see how to apply techniques such as snapshot testing, shallow rendering, module dependency mocking, and module aliasing to make your tests smooth and clean.

Alex Jover Morales is a Vue.js core team partner. Alex Jover Morales is a Vue.js core team partner.

He co-organizes Alicante Frontend and Vue Day. He is an instructor at Alligatorio and is interested in web performance, PWA, code quality, and the human side of code.

• Set up a Vue-test project to get started with Jest
• Unit test your components using techniques such as shallow rendering
• Gain insights into how to test the reactive parts in the logic of the Vue.js components
• Explore how to test deeply rendered Vue.js components
• Perform easy and quick tests with module dependency mocking, module aliasing, and more
• Know-how and when to use snapshot testing

If you are a programmer looking to make your development process smooth and bug-free, this is an ideal book for you. Some prior knowledge and experience of JavaScript will help you quickly and easily grasp the concepts explained in this book. This book uses easy-to-understand language to explain the various concepts of testing. The official VueJS testing library, vue-test-utils (https://github.com/vuejs/vue-test-utils), which is based on avoriaz (https://github.com/eddyerburgh/avoriaz), is just around the corner. The official VueJS testing library, vue-test-utils (https://github.com/vuejs/vue-test-utils), which is based on avoriaz (https://github.com/eddyerburgh/avoriaz), is just around the corner.

Indeed, @EddYerburgh (https://twitter.com/EddYerburgh) is doing a very good job of creating it. This library provides all the necessary tooling to make writing unit tests in a VueJS application easy. Jest (https://facebook.github.io/jest), on the other side, is a testing framework developed at Facebook, which makes testing a breeze using a number of awesome features, including the following:

• Almost no configuration by default
• A very cool interactive mode
• Running tests in parallel
• Testing with Spies, stubs, and mocks out of the box
• Built-in code coverage
• Snapshot testing
• Module-mocking utilities

You've probably already written tests without using any of these tools, just by using Karma, Mocha, Chai, Sinon, and so on, but you'll see how much easier it can be with these tools. Let's start by creating a new project using vue-cli (https://github.com/vuejs/vue-cli) and answering NO to all yes/no questions: npm install -g vue-cli vue init webpack vue-test cd vue-test Then, we'll need to install some dependencies, as follows: # Install dependencies npm i -D jest vue-jest babel-jest jest-vue-preprocessor (https://github.com/vire/jest-vue-preprocessor) is required to make Jest understand .vue files, and babel-jest (https://github.com/facebook/jest/tree/master/packages/babel-jest) is required for integration with Babel. Now install 'vue-test-utils' library. npm i -D @vue/test-utils Let's add the following Jest configuration in the package.json: { "jest": { "moduleNameMapper": { "^vue$": "vue/dist/vue.common.js" }, "moduleFileExtensions": ["js", "vue"], "transform": { "^.+\\.js$": "/node_modules/babel-jest", ".*\\.(vue)$": "/node_modules/vue-jest" } } } moduleFileExtensions