Testing Vue.js Components with Jest E-Book

Alex Jover Morales

• Herausgeber: Packt Publishing
• Kategorie: Wissenschaft und neue Technologien
• Sprache: Englisch

Seitenzahl: 54

Veröffentlichungsjahr: 2019

Beschreibung

Unit test your Vue.js components with this fully-featured JavaScript testing framework

Key Features

• Understand the various testing styles and their purpose
• Gain insight into how to test methods by avoiding dependencies
• Explore snapshot testing and its applications

Book Description

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.

By the end of this book, you'll know all about testing your components by utilizing the features of Jest.

What you will learn

• 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

Who this book is for

If you are a programmer looking to make your development process smooth and bug-free, this is an ideal book for you. Prior knowledge and experience of JavaScript will help you quickly and easily grasp the concepts explained in this book.

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.

Leseprobe

Testing Vue.js Components with Jest

A concise guide to testing Vue.js components using Jest and the official Vue Test Utils library

Alex Jover Morales

Testing Vue.js Components with Jest

Copyright © 2019 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

Author: Alex Jover Morales

Managing Editor: Ashish James

Acquisitions Editor: Karan Wadekar

Production Editor: Salma Patel

Editorial Board: Bharat Botle, Ewan Buckingham, Megan Carlisle, Simon Cox, Mahesh Dhyani, Manasa Kumar, Alex Mazonowicz, Dominic Pereira, Shiny Poojary, Abhishek Rane, Erol Staveley, Ankita Thakur, Nitesh Thakur, and Jonathan Wray

First Published: October 2019

Production Reference: 1171019

ISBN: 978-1-83921-968-9

Published by Packt Publishing Ltd.

Livery Place, 35 Livery Street

Birmingham B3 2PB, UK

Table of Contents

Preface   i

Chapter 1: Write the FirstVue.js Component Unit Test in Jest    1

Setting Up a vue-test Sample Project   2

Testing a Component   3

The Problem with Nested Components   5

What Is Shallow Rendering?   6

Testing a Component with Vue-Test-Utils   6

Chapter 2: Test Deeply Rendered Vue.js Components    11

Adding a Message Component   12

Testing MessageList with a Message Component   13

Chapter 3: Test Styles and Structure    17

The Wrapper Object   18

find and findAll   18

Asserting Structure and Style   18

Chapter 4: Test Properties and Custom Events    21

Properties   22

Testing Property Existence   22

Asserting Properties Validation   24

Custom Events   26

Testing that the Event Click Calls a Method Handler   28

Testing that the Custom Event message-clicked Is Emitted   29

Testing that @message-clicked Triggers an Event   30

Wrapping Up   30

Chapter 5: Test Computed Properties and Watchers   33

Computed Properties   33

Testing Computed Properties   34

Watchers   36

Testing Watchers   37

Wrapping Up   40

Chapter 6: Test Methods and Mock Dependencies   43

Mocking External Module Dependencies   44

Keeping Mocks Externalized   47

Wrapping Up   48

Chapter 7: Test Vue.js Slots   51

Making MessageList Slot-Based   52

$children and $slots   54

Testing Slots   54

Testing Named Slots   56

Testing Contextual Slot Specs   57

Wrapping Up   58

Chapter 8: Enhance Jest Configuration with Module Aliases   61

Webpack Aliases   62

Multiple Aliases   64

Other Solutions   65

Wrapping Up   65

Chapter 9: Snapshot Testing   67

Rethinking in Snapshots   68

When Snapshot Testing Doesn't Help   71

When a Test Fails   72

Conclusion   73

Preface

About

This section briefly introduces the author and what this book covers.

About the Book

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.

By the end of this book, you'll know all about testing your components by utilizing the features of Jest.

About the Authors

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.

Learning Objectives

Set up a Vue-test project to get started with JestUnit test your components using techniques such as shallow renderingGain insights into how to test the reactive parts in the logic of the Vue.js componentsExplore how to test deeply rendered Vue.js componentsPerform easy and quick tests with module dependency mocking, module aliasing, and moreKnow-how and when to use snapshot testing

Audience

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.

Approach

This book uses easy-to-understand language to explain the various concepts of testing. With a perfect blend of theory and practice, it shows you how to test Vue.js components easily by utilizing the various features of Jest. 

Chapter 1

Write the First Vue.js Component Unit Test in Jest

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 defaultA very cool interactive modeRunning tests in parallelTesting with Spies, stubs, and mocks out of the boxBuilt-in code coverageSnapshot testingModule-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.

Setting Up a vue-test Sample Project

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"

    },