With the Global Setup/Teardown and Async Test Environment APIs, Jest can work smoothly with puppeteer.
The basic idea is to:
Here's an example of the GlobalSetup script
// setup.js module.exports = async function() { const browser = await puppeteer.launch(); // store the browser instance so we can teardown it later global.__BROWSER__ = browser; // file the wsEndpoint for TestEnvironments mkdirp.sync(DIR); fs.writeFileSync(path.join(DIR, 'wsEndpoint'), browser.wsEndpoint()); };
Then we need a custom Test Environment for puppeteer
// puppeteer_environment.js class PuppeteerEnvironment extends NodeEnvironment { constructor(config) { super(config); } async setup() { await super.setup(); // get the wsEndpoint const wsEndpoint = fs.readFileSync(path.join(DIR, 'wsEndpoint'), 'utf8'); if (!wsEndpoint) { throw new Error('wsEndpoint not found'); } // connect to puppeteer this.global.__BROWSER__ = await puppeteer.connect({ browserWSEndpoint: wsEndpoint, }); } async teardown() { await super.teardown(); } runScript(script) { return super.runScript(script); } }
Finally we can close the puppeteer instance and clean-up the file
// teardown.js module.exports = async function() { // close the browser instance await global.__BROWSER__.close(); // clean-up the wsEndpoint file rimraf.sync(DIR); };
With all the things set up, we can now write our tests like this:
// test.js describe( '/ (Home Page)', () => { let page; beforeAll(async () => { page = await global.__BROWSER__.newPage(); await page.goto('https://google.com'); }, timeout); it('should load without error', async () => { const text = await page.evaluate(() => document.body.textContent); expect(text).toContain('google'); }); }, timeout, );
Here's the code of full working example.
© 2014–present Facebook Inc.
Licensed under the BSD License.
https://facebook.github.io/jest/docs/en/puppeteer.html