less than 1 minute read

Part #3 - (Optional) Add Puppeteer

If you want to automate some functions, or test browser specific components, Googles puppeteer will allow you to do this.

Add puppeteer

NOTE: this will by default download chromium which can be rather large

npm install puppeteer @types/puppeteer

Add Jest helpers for puppeteer

Add jest helpers for unit testing

npm install jest-puppeteer

In src/jest.config.js add the jest-puppeteer preset, if applied PART 1, you would now have the following jest config

// jest.config.js
module.exports = {
  preset: 'jest-puppeteer',
  reporters: [ "default", "jest-junit" ]
}

In src/jest-puppeteer.config.js add

module.exports = {
	launch: {
		dumpio: true,
		headless: false,
		args: ['--disable-infobars'],
	},
	browserContext: 'default'
};

In src/jest-global-setup.ts add

const { setup: setupPuppeteer } = require('jest-environment-puppeteer');
/**
 * Sets up the environment for running tests with Jest
 */
module.exports = async function globalSetup(globalConfig: any) {
	// do stuff which needs to be done before all tests are executed
	await setupPuppeteer(globalConfig);
};

now, add typescript support for jest and puppeteer

npm install @types/jest-environment-puppeteer

Recap

NPM install

echo add puppeteer
echo ===========================================
npm install puppeteer @types/puppeteer

echo add jest-puppeteer
echo ===========================================
npm install jest-puppeteer
npm install @types/jest-environment-puppeteer

Comments