0%

Book Description

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.

Table of Contents

  1. Preface
    1. About the Book
      1. About the Authors
      2. Learning Objectives
      3. Audience
      4. Approach
  2. Chapter 1
  3. Write the First Vue.js Component Unit Test in Jest
    1. Setting Up a vue-test Sample Project
    2. Testing a Component
      1. The Problem with Nested Components
      2. What Is Shallow Rendering?
    3. Testing a Component with Vue-Test-Utils
  4. Chapter 2
  5. Test Deeply Rendered Vue.js Components
    1. Adding a Message Component
    2. Testing MessageList with a Message Component
  6. Chapter 3
  7. Test Styles and Structure
    1. The Wrapper Object
      1. find and findAll
      2. Asserting Structure and Style
  8. Chapter 4
  9. Test Properties and Custom Events
    1. Properties
      1. Testing Property Existence
      2. Asserting Properties Validation
    2. Custom Events
      1. Testing that the Event Click Calls a Method Handler
      2. Testing that the Custom Event message-clicked Is Emitted
      3. Testing that @message-clicked Triggers an Event
    3. Wrapping Up
  10. Chapter 5
  11. Test Computed Properties and Watchers
    1. Computed Properties
      1. Testing Computed Properties
    2. Watchers
      1. Testing Watchers
    3. Wrapping Up
  12. Chapter 6
  13. Test Methods and Mock Dependencies
    1. Mocking External Module Dependencies
    2. Keeping Mocks Externalized
    3. Wrapping Up
  14. Chapter 7
  15. Test Vue.js Slots
    1. Making MessageList Slot-Based
    2. $children and $slots
    3. Testing Slots
    4. Testing Named Slots
    5. Testing Contextual Slot Specs
    6. Wrapping Up
  16. Chapter 8
  17. Enhance Jest Configuration with Module Aliases
    1. Webpack Aliases
    2. Multiple Aliases
    3. Other Solutions
    4. Wrapping Up
  18. Chapter 9
  19. Snapshot Testing
    1. Rethinking in Snapshots
    2. When Snapshot Testing Doesn't Help
    3. When a Test Fails
    4. Conclusion
3.145.166.7