From 7fbb2730d8155e127f2563149531b45a897e2103 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Greg=20Berg=C3=A9?= Date: Sun, 4 Mar 2018 19:37:21 +0100 Subject: [PATCH] feat: add jest-puppeteer-preset --- README.md | 18 ++-- jest.config.js | 3 +- packages/jest-environment-puppeteer/README.md | 84 +------------------ .../jest-environment-puppeteer/package.json | 2 +- packages/jest-puppeteer-preset/README.md | 31 +++++++ .../jest-puppeteer-preset/jest-preset.json | 6 ++ packages/jest-puppeteer-preset/package.json | 23 +++++ 7 files changed, 73 insertions(+), 94 deletions(-) create mode 100644 packages/jest-puppeteer-preset/README.md create mode 100644 packages/jest-puppeteer-preset/jest-preset.json create mode 100644 packages/jest-puppeteer-preset/package.json diff --git a/README.md b/README.md index f7e949a9..bd0d3fbd 100644 --- a/README.md +++ b/README.md @@ -7,7 +7,7 @@ Run your tests using Jest & Puppeteer 🎪✨ ``` -npm install jest-environment-puppeteer puppeteer +npm install jest-puppeteer-preset puppeteer ``` ## Usage @@ -16,9 +16,7 @@ Update your Jest configuration: ```json { - "globalSetup": "jest-environment-puppeteer/setup", - "globalTeardown": "jest-environment-puppeteer/teardown", - "testEnvironment": "jest-environment-puppeteer" + "preset": "jest-puppeteer-preset" } ``` @@ -27,12 +25,11 @@ Use Puppeteer in your tests: ```js describe('Google', () => { beforeAll(async () => { - await mainPage.goto('https://google.com') + await page.goto('https://google.com') }) it('should display "google" text on page', async () => { - const text = await mainPage.evaluate(() => document.body.textContent) - expect(text).toContain('google') + expectPage().toMatch('google') }) }) ``` @@ -41,7 +38,9 @@ describe('Google', () => { ### Writing tests using Puppeteer -To write your integration tests using Puppeteer you can find all available methods in [Puppeteer documentation](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md). +Writing integration test can be done using [Puppeteer API]([Puppeteer documentation](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md)) but it can be complicated and hard because API is not designed for testing. + +To make it simpler, an `expectPage()` is automatically installed and available, it provides a lot of convenient methods, all documented in [expect-puppeteer API](https://github.com/smooth-code/jest-puppeteer/tree/master/packages/expect-ppuppeteer). ### Configure Puppeteer @@ -59,7 +58,7 @@ module.exports = { ### Configure ESLint -Jest Environment Puppeteer exposes two new globals: `browser` and `page`. If you want to avoid errors, you can add them to your `.eslintrc.js`: +Jest Puppeteer exposes two new globals: `browser`, `page` and `expectPage`. If you want to avoid errors, you can add them to your `.eslintrc.js`: ```js // .eslintrc.js @@ -70,6 +69,7 @@ module.exports = { globals: { page: true, browser: true, + expectPage: true, }, } ``` diff --git a/jest.config.js b/jest.config.js index f4614924..27f63429 100644 --- a/jest.config.js +++ b/jest.config.js @@ -1,6 +1,5 @@ module.exports = { + preset: './jest-puppeteer-preset', globalSetup: './jestConfig/globalSetup', globalTeardown: './jestConfig/globalTeardown', - testEnvironment: './packages/jest-environment-puppeteer', - setupTestFrameworkScriptFile: './packages/expect-puppeteer', } diff --git a/packages/jest-environment-puppeteer/README.md b/packages/jest-environment-puppeteer/README.md index 93f4fbef..c51107fe 100644 --- a/packages/jest-environment-puppeteer/README.md +++ b/packages/jest-environment-puppeteer/README.md @@ -27,96 +27,16 @@ Use Puppeteer in your tests: ```js describe('Google', () => { beforeAll(async () => { - await mainPage.goto('https://google.com') + await page.goto('https://google.com') }) it('should display "google" text on page', async () => { - const text = await mainPage.evaluate(() => document.body.textContent) + const text = await page.evaluate(() => document.body.textContent) expect(text).toContain('google') }) }) ``` -## Recipes - -### Writing tests using Puppeteer - -To write your integration tests using Puppeteer you can find all available methods in [Puppeteer documentation](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md). - -### Configure Puppeteer - -Jest Puppeteer automatically detect the best config to start Puppeteer but sometimes you may need to specify custom options. - -[All Puppeteer launch options](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#puppeteerlaunchoptions) 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. - -```js -// jest-puppeteer.config.js -module.exports = { - dumpio: true, - headless: process.env.HEADLESS !== 'false', -} -``` - -### Configure ESLint - -Jest Environment Puppeteer exposes two new globals: `browser` and `page`. If you want to avoid errors, you can add them to your `.eslintrc.js`: - -```js -// .eslintrc.js -module.exports = { - env: { - jest: true, - }, - globals: { - page: true, - browser: true, - }, -} -``` - -### Extend PuppeteerEnvironment - -Sometimes you want to use your own environment, to do that you can extend `PuppeteerEnvironment`. - -```js -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 = CustomEnvironment -``` - -### Access `globalSetup` or `globalTeardown` - -It is possible to access `globalSetup` or `globalTeardown` in your scripts. - -```js -const { - setup: setupPuppeteer, - teardown: teardownPuppeteer, -} = require('jest-environment-puppeteer') - -async function setup() { - await setupPuppeteer() - // ... -} - -async function teardown() { - // ... - await teardownPuppeteer() -} -``` - ## API ### `global.browser` diff --git a/packages/jest-environment-puppeteer/package.json b/packages/jest-environment-puppeteer/package.json index 22cc59ff..3df49042 100644 --- a/packages/jest-environment-puppeteer/package.json +++ b/packages/jest-environment-puppeteer/package.json @@ -1,6 +1,6 @@ { "name": "jest-environment-puppeteer", - "description": "Run your tests using Jest & Puppeteer.", + "description": "Puppeteer environment for Jest.", "version": "1.0.1", "main": "index.js", "repository": "https://github.com/smooth-code/jest-puppeteer/tree/master/packages/jest-environment-puppeteer", diff --git a/packages/jest-puppeteer-preset/README.md b/packages/jest-puppeteer-preset/README.md new file mode 100644 index 00000000..4a65615b --- /dev/null +++ b/packages/jest-puppeteer-preset/README.md @@ -0,0 +1,31 @@ +# jest-puppeteer-preset + +[![Build Status][build-badge]][build] +[![version][version-badge]][package] +[![MIT License][license-badge]][license] + +Jest preset containing all required configuration for writing integration tests using Puppeteer. + +``` +npm install jest-puppeteer-preset puppeteer +``` + +## Usage + +```js +// jest.config.js +module.exports = { + preset: 'jest-puppeteer-preset', +} +``` + +## License + +MIT + +[build-badge]: https://img.shields.io/travis/smooth-code/jest-puppeteer.svg?style=flat-square +[build]: https://travis-ci.org/smooth-code/jest-puppeteer +[version-badge]: https://img.shields.io/npm/v/jest-puppeteer-preset.svg?style=flat-square +[package]: https://www.npmjs.com/package/jest-puppeteer-preset +[license-badge]: https://img.shields.io/npm/l/jest-puppeteer-preset.svg?style=flat-square +[license]: https://github.com/smooth-code/jest-puppeteer/blob/master/LICENSE diff --git a/packages/jest-puppeteer-preset/jest-preset.json b/packages/jest-puppeteer-preset/jest-preset.json new file mode 100644 index 00000000..d91c4279 --- /dev/null +++ b/packages/jest-puppeteer-preset/jest-preset.json @@ -0,0 +1,6 @@ +{ + "globalSetup": "jest-environment-puppeteer/setup", + "globalTeardown": "jest-environment-puppeteer/teardown", + "testEnvironment": "jest-environment-puppeteer", + "setupTestFrameworkScriptFile": "expect-puppeteer" +} diff --git a/packages/jest-puppeteer-preset/package.json b/packages/jest-puppeteer-preset/package.json new file mode 100644 index 00000000..883623e1 --- /dev/null +++ b/packages/jest-puppeteer-preset/package.json @@ -0,0 +1,23 @@ +{ + "name": "jest-puppeteer-preset", + "description": "Run your tests using Jest & Puppeteer.", + "version": "1.0.1", + "main": "lib/index.js", + "repository": "https://github.com/smooth-code/jest-puppeteer/tree/master/packages/jest-puppeteer-preset", + "author": "Greg Bergé ", + "license": "MIT", + "keywords": [ + "jest", + "puppeteer", + "jest-puppeteer", + "chromeless", + "chrome-headless" + ], + "peerDependencies": { + "puppeteer": "^1.0.0" + }, + "dependencies": { + "jest-environment-puppeteer": "^1.0.1", + "expect-puppeteer": "^1.0.1" + } +}