Run your tests using Jest & Puppeteer 🎪✨
npm install jest-puppeteer-preset puppeteer
Update your Jest configuration:
{
"preset": "jest-puppeteer-preset"
}Use Puppeteer in your tests:
describe('Google', () => {
beforeAll(async () => {
await page.goto('https://google.com')
})
it('should display "google" text on page', async () => {
await expect(page).toMatch('google')
})
})Writing integration test can be done using Puppeteer API but it can be complicated and hard because API is not designed for testing.
To make it simpler, expect-puppeteer API add some specific matchers if you make expectation on a Puppeteer Page.
Some examples:
// Assert that current page contains 'Text in the page'
await expect(page).toMatch('Text in the page')// Assert that a button containing text "Home" will be clicked
await expect(page).toClick('button', { text: 'Home' })// Assert that a form will be filled
await expect(page).toFillForm('form[name="myForm"]', {
firstName: 'James',
lastName: 'Bond',
})Jest Puppeteer integrates a functionality to run start a server when your test suite is started. It automatically close the server when tests are done.
To use it, specify a server section in your jest-puppeteer.config.js.
// jest-puppeteer.config.js
module.exports = {
server: {
command: 'node server.js',
port: 4444,
},
}Jest Puppeteer automatically detect the best config to start Puppeteer but sometimes you may need to specify custom options. All Puppeteer launch options can be specified in jest-puppeteer.config.js at the root of the project. Since it is JavaScript, you can use all stuff you need, including environment.
// jest-puppeteer.config.js
module.exports = {
launch: {
dumpio: true,
headless: process.env.HEADLESS !== 'false',
},
}Jest Puppeteer exposes two new globals: browser, page and expectPage. If you want to avoid errors, you can add them to your .eslintrc.js:
// .eslintrc.js
module.exports = {
env: {
jest: true,
},
globals: {
page: true,
browser: true,
expectPage: true,
},
}Sometimes you want to use your own environment, to do that you can extend PuppeteerEnvironment.
const PuppeteerEnvironment = require('jest-environment-puppeteer')
class CustomEnvironment extends PuppeteerEnvironment {
async setup() {
await super.setup()
// Your setup
}
async teardown() {
// Your teardown
await super.teardown()
}
}
module.exports = CustomEnvironmentIt is possible to access globalSetup or globalTeardown in your scripts.
const {
setup: setupPuppeteer,
teardown: teardownPuppeteer,
} = require('jest-environment-puppeteer')
async function setup() {
await setupPuppeteer()
// ...
}
async function teardown() {
// ...
await teardownPuppeteer()
}Give access to the Puppeteer Browser.
it('should open a new page', async () => {
const page = await browser.newPage()
await page.goto('https://google.com')
})Give access to a Puppeteer Page opened at start (you will use it most of time).
it('should fill an input', async () => {
await page.type('#myinput', 'Hello')
})Helper to make Puppeteer assertions, see documentation.
await expect(page).toMatch('A text in the page')
// ...You can specify a jest-puppeteer.config.js at the root of the project.
launch<object> All Puppeteer launch options can be specified injest-puppeteer.config.jsat the root of the project. Since it is JavaScript, you can use all stuff you need, including environment.server<Object> Server options
// jest-puppeteer.config.js
module.exports = {
launch: {
dumpio: true,
headless: process.env.HEADLESS !== 'false',
},
server: {
command: 'node server.js',
port: 4444,
},
}Thanks to Fumihiro Xue for his great Jest example.
MIT