<commit_before>+++
date = "2019-03-03T05:57:57+02:00"
title = "Integration Testing Vue.js Components With Jest and Puppeteer"
description = "Learn how to use Jest and Puppeteer for Integration Testing Vue.js Container Components and Acceptance Testing Vue.js applications."
intro = "This is a followup article of my previous article about Integration Testing Vue.js applications with Cypress. In this article we are testing the same application but instead of using Cypress we want to use the combined forces of Jest and Puppeteer..."
draft = false
categories = ["Development"]
tags = ["JavaScript", "Vue", "Front-End Architecture", "TDD"]
images = ["https://res.cloudinary.com/maoberlehner/image/upload/c_scale,f_auto,q_auto,w_1200,h_675/v1532158513/blog/2019-03-03/jest-puppeteer-test-code-twitter"]
+++

> **Note:** This is the sixth part of my “Advanced Vue.js Application Architecture” series on how to structure and test large scale Vue.js applications. Stay tuned, there's more to come! [Follow me on Twitter](https://twitter.com/MaOberlehner) if you don't want to miss the next article.  
> [<< First](/blog/multi-export-vue-single-file-ui-components/) [< Previous](/blog/integration-testing-vue-container-components-with-cypress/) [Next >](/blog/visual-regression-tests-for-vue-applications-with-jest-and-puppeteer/)

This is a followup article of [my previous article about Integration Testing Vue.js applications with Cypress](/blog/integration-testing-vue-container-components-with-cypress/). In this article we are testing the same application but instead of using Cypress we want to use the combined forces of Jest and Puppeteer. I won’t go into much detail about the application itself or about the separation of Integration Tests and Acceptance Tests, if you’re interested in that, please also [read the previous article](/blog/integration-testing-vue-container-components-with-cypress/). **In this article we take a closer look at the technical aspect of how we can utilize Jest and Puppeteer to write Integration and Acceptance Tests for a Vue.js application.**

## Table of Contents

- [Setup](#setup)
- [Puppeteer helper functions](#puppeteer-helper-functions)
- [Writing tests](#writing-tests)
- [Pros and cons compared to Cypress](#pros-and-cons-compared-to-cypress)

## Setup

Let’s begin with installing all the necessary npm packages. I'm assuming that you already have a Vue CLI 3 setup with Jest Unit Testing up and running, otherwise you also have to [set up Jest](https://www.npmjs.com/package/@vue/cli-plugin-unit-jest#installing-in-an-already-created-project).

```bash
npm install jest-puppeteer puppeteer --save-dev
```

Next up we have to update our Jest configuration file to make it possible to switch between Unit-, Acceptance- and Integration Testing modes.

```js
// jest.config.js
const { defaults } = require('jest-config');

const puppeteerModes = ['acceptance', 'integration'];
const { TEST_MODE } = process.env;
const PUPPETEER_MODE = puppeteerModes.includes(TEST_MODE);

module.exports = {
  moduleFileExtensions: [<commit_msg>Improve phrasing<commit_after>+++
date = "2019-03-03T05:57:57+02:00"
title = "Integration Testing Vue.js Components With Jest and Puppeteer"
description = "Learn how to use Jest and Puppeteer for Integration Testing Vue.js Container Components and Acceptance Testing Vue.js applications."
intro = "This is a followup article of my previous article about Integration Testing Vue.js applications with Cypress. In this article, we test the same application but, instead of using Cypress, we want to use the combined forces of Jest and Puppeteer..."
draft = false
categories = ["Development"]
tags = ["JavaScript", "Vue", "Front-End Architecture", "TDD"]
images = ["https://res.cloudinary.com/maoberlehner/image/upload/c_scale,f_auto,q_auto,w_1200,h_675/v1532158513/blog/2019-03-03/jest-puppeteer-test-code-twitter"]
+++

> **Note:** This is the sixth part of my “Advanced Vue.js Application Architecture” series on how to structure and test large scale Vue.js applications. Stay tuned, there's more to come! [Follow me on Twitter](https://twitter.com/MaOberlehner) if you don't want to miss the next article.  
> [<< First](/blog/multi-export-vue-single-file-ui-components/) [< Previous](/blog/integration-testing-vue-container-components-with-cypress/) [Next >](/blog/visual-regression-tests-for-vue-applications-with-jest-and-puppeteer/)

This is a followup article of [my previous article about Integration Testing Vue.js applications with Cypress](/blog/integration-testing-vue-container-components-with-cypress/). In this article, we test the same application but, instead of using Cypress, we want to use the combined forces of Jest and Puppeteer. I won’t go into much detail about the application itself or the separation of Integration Tests and Acceptance Tests, if you’re interested in that, please also [read the previous article](/blog/integration-testing-vue-container-components-with-cypress/). **In this article we take a closer look at the technical aspect of how we can utilize Jest and Puppeteer to write Integration and Acceptance Tests for a Vue.js application.**

## Table of Contents

- [Setup](#setup)
- [Puppeteer helper functions](#puppeteer-helper-functions)
- [Writing tests](#writing-tests)
- [Pros and cons compared to Cypress](#pros-and-cons-compared-to-cypress)

## Setup

Let's begin by installing all the necessary npm packages. I'm assuming that you already have a Vue CLI 3 setup with Jest Unit Testing up and running; otherwise you also have to [set up Jest](https://www.npmjs.com/package/@vue/cli-plugin-unit-jest#installing-in-an-already-created-project).

```bash
npm install jest-puppeteer puppeteer --save-dev
```

Next up, we have to update our Jest configuration file to make it possible to switch between Unit-, Acceptance- and Integration Testing modes.

```js
// jest.config.js
const { defaults } = require('jest-config');

const puppeteerModes = ['acceptance', 'integration'];
const { TEST_MODE } = process.env;
const PUPPETEER_MODE = puppeteerModes.includes(TEST_MODE);

module.exports = {
  moduleFileExtensions: [
{'fraction_non_alphanumeric': 0.10355512067840834, 'fraction_numerical': 0.014350945857795172, 'mean_word_length': 4.995112414467253, 'pattern_counts': {'":': 0, '<': 9, '<?xml version=': 0, '>': 9, 'https://': 6, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2145752', 'n_tokens_mistral': 1909, 'n_tokens_neox': 1739, 'n_words': 658}