vue.tar.gz

L_11

L_111

L_66

L_666

L_99

L_999

L_33

L_333

Front-end frameworks, in general, are exploding in popularity, and Vue.js, in particular, has become one of the most popular ones.

As front-end frameworks continue to grow in usage, the ability to incorporate testing has become an essential feature. Ensuring the safety and security of your web applications is critical.

You can learn to test your Vue.js applications thoroughly using Jest with this interactive course.

You'll start by learning the simplest unit tests in Jest, and will gradually build up to more intricate tests of different Vue components. To give you practical front-end testing experience, you'll be running your tests on a predefined data rendering Vue.js application.

This course is essential for anyone looking to create robust and effective front-end tests for their Vue apps.

Testing Vue.js Components with Jest

### Testing Methods

What should we test in methods? That’s a question that we had when we started doing unit tests. Everything comes down to **testing what that method does**. This means that we need to *avoid calls to any dependency*; so, we’ll need to mock them.

Let's add a submit event to the form in the `Form.vue` component that we created in the last chapter:

React

Dart

The `.prevent` modifier is just a convenient way to call `event.preventDefault()` in order to prevent reloading the page. Now make some modifications to call an API and store the result, by adding a `results` array to the data and an `onSubmit` method:


The method is using *axios* to perform an HTTP call to the "posts" endpoint of *jsonplaceholder*, which is just a RESTful API for this kind of example. With the `q` query parameter, we can search for posts using the `value` provided as parameter.

For testing the `onSubmit` method:

- We don’t want to call the `axios.get` actual method
- We want to check that it is calling axios (but not the real one) and that it returns a promise
- We want to check that the promise callback is setting `this.results` to the promise result

This is probably one of the hardest things to test when you have external dependencies. Now, what we need to do is to **mock the external dependencies**.

## Mock External Module Dependencies

Jest provides a really great mocking system that allows you to mock everything in quite a convenient way. You don’t need any extra libraries for that. We have already seen `jest.spyOn` and `jest.fn` for spying and creating stub functions, although they are not enough for this case.

We need to mock the whole `axios` module. Here's where `jest.mock` comes onto the stage. It allows us to easily mock module dependencies by writing this at the top of our file:

# Testing Methods

What should we test in methods? That’s a question that we had when we started doing unit tests. Everything comes down to **testing what that method does**. This means that we need to *avoid calls to any dependency*; so, we’ll need to mock them.

Let's add a submit event to the form in the `Form.vue` component that we created in the last chapter:

The method is using *axios* to perform an HTTP call to the "posts" endpoint of *jsonplaceholder*, which is just a RESTful API for this kind of example. With the `q` query parameter, we can search for posts using the `value` provided as parameter.

For testing the `onSubmit` method:

- We don’t want to call the `axios.get` actual method
- We want to check that it is calling axios (but not the real one) and that it returns a promise
- We want to check that the promise callback is setting `this.results` to the promise result

This is probably one of the hardest things to test when you have external dependencies. Now, what we need to do is to **mock the external dependencies**.

# Mock External Module Dependencies

Jest provides a really great mocking system that allows you to mock everything in quite a convenient way. You don’t need any extra libraries for that. We have already seen `jest.spyOn` and `jest.fn` for spying and creating stub functions, although they are not enough for this case.

We need to mock the whole `axios` module. Here's where `jest.mock` comes onto the stage. It allows us to easily mock module dependencies by writing this at the top of our file:

In this lesson, we will learn about External Modules Dependencies.

First Vue.js Component Unit Test

Testing Deeply Rendered Vue.js Components

Testing Styles and Structure

Testing Properties and Custom Events

Testing Computed Properties and Watchers

Testing Methods and Mock Dependencies

Testing Vue.js Slots

Enhance Jest configuration with Module Aliases

Snapshot Testing

Local Installation Guide

Mock External Module Dependencies

Testing Methods