How to configure Jest Puppeteer for end to end automation testing?

Jest is the widely used javascript-based framework for writing unit and integration tests. Most of the developers use Jest for writing unit tests as it supports almost all trending javascript-based frameworks like React, Node, typescript, babel, etc. To write end-to-end tests with the Puppeteer, one can use a jest puppeteer.

Here is the youtube video where I have discussed, what is jest? Advantages of jest and demoed how to configure jest puppeteer and run headless and without headless. Watch the video and subscribe to the channel.

Advantages of Jest -

Below are the advantages of Using Jest framework.

Simple to set up - it is easy to set up, just need to run a few commands and it will set up. (I have demoed it in the above video) or you can follow these GitHub steps.
Fast and safe - Jest can run tests in parallel. To make things quick, Jest runs previously failed tests first and re-organizes runs based on how long test files take.
Isolated - All tests have their own process so while running parallel it runs fast with good performance.
Great APIs - It has supported a lot of APIs with good documentation.
SnapShots
Easy mocking
Support of code coverage
Great exceptions
Good documentation and community

How to configure puppeteer jest -

These steps I have already covered in the video.

Install puppeteer, jest, and puppeteer-jest using the below command - "npm install --save-dev jest-puppeteer puppeteer jest"
Add jest-puppeteer as a preset in your Jest configuration file "jest.config.js": { "preset": "jest-puppeteer" }
Sample script
describe("Google", () => {
beforeAll(async () => {
await page.goto("https://google.com");
});

it('should display "google" text on page', async () => {
await expect(page).toMatchTextContent("google");
});
it('should display "google" text on page', async () => {
await expect(page).tobe("google");
});
});

Need to add "Jest" in the test section in package.json
You can add jest-puppeteer.config.js to add the configurations related to Puppeteer
module.exports = {
launch: {
headless:false
},
browserContext: 'default'
}

If you have any doubts or suggestions feel free to reach out on social media. Follow Us on Reddit, Facebook, and Twitter. Don't forget to subscribe to the channel -> Youtube channel. Thank You