Using with puppeteer
With the Async Test Environment and Global Setup/Teardown APIs, Jest will be able to work smoothly with puppeteer.
Trying to generate code coverage for test files using Puppeteer is not possible currently if your test uses page.$eval, page.$$eval or page.evaluate because the passed function will be executed outside of Jest's scope.
Use jest-puppeteer Preset
Jest Puppeteer will provide all required configuration to run your tests using Puppeteer.
1. First you need to install jest-puppeteer
yarn add --dev jest-puppeteer
2. You need to specify preset in your Jest configuration:
{
"preset": "jest-puppeteer"
}
3. You should write your test
describe('w3resource', () => {
beforeAll(async () => {
await page.goto('https://w3resource.com');
});
it('should be titled "w3resource"', async () => {
await expect(page.title()).resolves.toMatch('w3resource');
});
});
There is no need to load any dependencies. Puppeteer's page and browser classes are automatically exposed
Custom example without jest-puppeteer preset
You can equally hook up puppeteer from scratch. The basic idea is that you have to:
- launch & file puppeter's websocket endpoint with Global Setup
- connect to puppeteer from each of the Test Environment
- use Global Teardown to close puppeter
An example of the GlobalSetup script is shown below:
// setup.js
const puppeteer = require('puppeteer');
const mkdirp = require('mkdirp');
const path = require('path');
const fs = require('fs');
const os = require('os');
const DIR = path.join(os.tmpdir(), 'jest_puppeteer_global_setup');
module.exports = async function() {
const browser = await puppeteer.launch();
// stores the browser instance so we can teardown it later
// this global will only be available in the teardown but not in TestEnvironments
global.__BROWSER_GLOBAL__ = browser;
// uses the file system to expose the wsEndpoint for TestEnvironments
mkdirp.sync(DIR);
fs.writeFileSync(path.join(DIR, 'wsEndpoint'), browser.wsEndpoint());
};
Then you will need a custom Test Environment for puppeteer
// puppeteer_environment.js
const NodeEnvironment = require('jest-environment-node');
const fs = require('fs');
const path = require('path');
const puppeteer = require('puppeteer');
const os = require('os');
const DIR = path.join(os.tmpdir(), 'jest_puppeteer_global_setup');
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);
}
}
module.exports = PuppeteerEnvironment;
Finally, you can close the puppeteer instance and clean-up the file
// teardown.js
const os = require('os');
const rimraf = require('rimraf');
const path = require('path');
const DIR = path.join(os.tmpdir(), 'jest_puppeteer_global_setup');
module.exports = async function() {
// close the browser instance
await global.__BROWSER_GLOBAL__.close();
// clean-up the wsEndpoint file
rimraf.sync(DIR);
};
Having set up everything, you can now write your tests as shown in the example below:
// test.js
const timeout = 5000;
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,
);
Then, you need to set jest.config.js to read from these files. (The jest-puppeteer preset does something like this under the hood.)
module.exports = {
globalSetup: './setup.js',
globalTeardown: './teardown.js',
testEnvironment: './puppeteer_environment.js',
};
Previous:
Using Jest with MongoDB and DynamoDB
Next:
DOM Manipulation
- New Content published on w3resource :
- Python Numpy exercises
- Python GeoPy Package exercises
- Python Pandas exercises
- Python nltk exercises
- Python BeautifulSoup exercises
- Form Template
- Composer - PHP Package Manager
- PHPUnit - PHP Testing
- Laravel - PHP Framework
- Angular - JavaScript Framework
- React - JavaScript Library
- Vue - JavaScript Framework
- Jest - JavaScript Testing Framework