{"componentChunkName":"component---src-pages-markdown-remark-fields-slug-js","path":"/engineering/e2e-testing-with-jest-puppeteer/","result":{"data":{"markdownRemark":{"id":"914f0d7d-977f-58d9-848b-b82a76c72f1c","excerpt":"Writing a foolproof code is hard, especially with a team collaborating on a single project. Thus it becomes increasingly important to ensure that no new code…","html":"

Writing a foolproof code is hard, especially with a team collaborating on a single project. Thus it becomes increasingly important to ensure that no new code breaks existing functionality. And for this purpose, automated tests are used.

\n

Requirements

\n
    \n
  1. Basic knowledge of Javascript
    2. \n
  2. Familiarity with Node.js
    3. \n
\n

In this blog, we will learn how to integrate Jest and Puppeteer in our project for End-to-End Testing. Jest is a javascript testing framework maintained by Facebook. Puppeteer is a Node library created by Google, which provides a high-level API to control headless Chrome. Before we delve deeper into Jest and Puppeteer, let's familiarise ourselves with a few things.

\n

End-to-End(E2E) Testing: E2E testing refers to the testing of a complete functionality of some application. It checks that a functionality acts as intended.

\n

Headless Testing: Headless testing is a way or running browser UI tests without any browser UI. It is a preferred method mainly due to its performance. It is fast, light-weight, and less resource-intensive.

\n

Installation

\n

To install Jest and Puppeteer, open the command line in your project directory and run:

\n

For npm users:
\nnpm install --save-dev jest puppeteer jest-puppeteer

\n

For yarn users:
\nyarn add --dev jest puppeteer jest-puppeteer.

\n

Now that we've installed Jest and Puppeteer, it is time to set up the testing environment. Create a file jest.config.js in the project root directory and write the following code in it:

\n
module.exports = {\n  preset: "jest-puppeteer",\n  globals: {\n    URL: "http://localhost:8080"\n  },\n  testMatch: [\n    "<path-to-the-tests-folder>/**.test.js"\n  ],\n  verbose: true\n};
\n

Defining the preset sets up a puppeteer environment for testing. Test match directs it to the folder where tests are defined, for a piece of more detailed knowledge about running Jest with Puppeteer check this out.

\n

Now create a file jest-puppeteer.config.js in the project root directory. Here we define the testing environment further. To begin with you can add the following in this file:

\n
module.exports = {\n    launch: {\n        headless: process.env.HEADLESS !== 'false',\n        slowMo: process.env.SLOWMO ? process.env.SLOWMO : 0,\n        devtools: true\n    }\n}
\n

Testing

\n

Now we can begin writing our tests. In this example, we'll start writing a basic test to check the title of the page opened. Now head over to the tests folder defined and create a file title.test.js. As you might have noticed, .test.js would be the file extension of the jest tests defined.

\n

This is what a typical title.test.js would look like:

\n
// Defining the timeout for the test\nconst timeout = process.env.SLOWMO ? 6000 : 4000;\nconst fs = require('fs');\n\n// Go to the specified path and wait for the domcontent to load before running the tests\nbeforeAll(async () => {\n  path = fs.realpathSync('file://<file-path>');\n  await page.goto('file://' + path, {waitUntil: 'domcontentloaded'});\n});\n\ndescribe('Title of the page', () => {\n  test('Title of the page', async () => {\n    // Gets page title\n    const title = await page.title();\n    // Compares it with the intended behaviour\n    expect(title).toBe('<title-of-the-page>');\n\n  }, timeout);\n});
\n

Hurray! You've added Headless UI tests to your project. Now you can similarly define tests for different functionalities using the docs here.

\n

Cons of using jest-puppeteer

\n
    \n
  1. It is headless and hence fast, light-weight, and less resource-intensive.
    2. \n
  2. It can stimulate keyboard-press and mouse-click akin to manual testing functions.
    3. \n
  3. It is simple and easy to use and works out of the box.
    4. \n
\n

Problems that you might face

\n

It could give a sandbox-ing error if you run it in a container without a defined user. When running headless Chrome in a container without a defined user, the chromeOptions environment property needs a --no-sandbox args (in addition to the other headless args), or Chrome won't be able to startup. The possible solutions to this are:

\n
    \n
  1. Make sure you're not running them as a root user.
    2. \n
  2. If running them as a root user, include args: ['--no-sandbox'] in jest-puppeteer.config.js (not recommended).
    3. \n
  3. Make sure you have all the required dependencies installed.\nFor Debian systems that can be installed using:\nsudo apt-get install gconf-service libasound2 libatk1.0-0 libc6 libcairo2 libcups2 libdbus-1-3 libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 ca-certificates fonts-liberation libappindicator1 libnss3 lsb-release xdg-utils wget
    4. \n
\n

Happy coding! =)

\n","headings":[{"value":"Requirements","depth":2},{"value":"Installation","depth":2},{"value":"Testing","depth":2},{"value":"Cons of using jest-puppeteer","depth":2},{"value":"Problems that you might face","depth":2}],"fields":{"slug":"/engineering/e2e-testing-with-jest-puppeteer/"},"frontmatter":{"metatitle":null,"metadescription":null,"description":"Learn how to integrate Jest and Puppeteer in your project for End-to-End Testing.","title":"End-to-End Testing with Jest and Puppeteer","canonical":null,"date":"October 15, 2020","updated_date":null,"tags":["Testing","Jest","Puppeteer"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.6129032258064515,"src":"/static/bc9e7eb8f88f913bb3f3ba67edf01319/76208/jest-puppeteer.png","srcSet":"/static/bc9e7eb8f88f913bb3f3ba67edf01319/f5f11/jest-puppeteer.png 200w,\n/static/bc9e7eb8f88f913bb3f3ba67edf01319/6d133/jest-puppeteer.png 400w,\n/static/bc9e7eb8f88f913bb3f3ba67edf01319/76208/jest-puppeteer.png 799w","sizes":"(max-width: 799px) 100vw, 799px"}}},"author":{"id":"Shreya Sharma","github":"cypherean","bio":"Shreya is an undergraduate at IIT Roorkee. An avid reader with an unquenchable thirst for knowledge, she likes to try her hand at various programming languages.","avatar":null}}}},"pageContext":{"id":"914f0d7d-977f-58d9-848b-b82a76c72f1c","fields__slug":"/engineering/e2e-testing-with-jest-puppeteer/","__params":{"fields__slug":"engineering"}}},"staticQueryHashes":["1171199041","1384082988","1711371485","1753898100","2100481360","229320306","23180105","528864852"]}