Aller au contenu principal
Version: 26.x

Utilisation avec puppeteer

Grâce aux API Global Setup/Teardown et Async Test Environment, Jest peut fonctionner sans problème avec puppeteer.

La génération de couverture de code pour les fichiers de test à l'aide de Puppeteer n'est actuellement pas possible si votre test utilise page.$eval, page.$$eval ou page.evaluate car la fonction passée est exécutée en dehors de la portée de Jest. Consultez l'issue #7962 sur GitHub pour une solution de contournement.

Utilisez le preset jest-puppeteer#

Jest Puppeteer fournit toute la configuration requise pour exécuter vos tests en utilisant Puppeteer.

  1. Tout d'abord, installez jest-puppeteer
yarn add --dev jest-puppeteer
  1. Spécifiez le preset dans votre configuration Jest :
{
"preset": "jest-puppeteer"
}
  1. Écrivez votre test
describe('Google', () => {
beforeAll(async () => {
await page.goto('https://google.com');
});
it('doit être titré "Google"', async () => {
await expect(page.title()).resolves.toMatch('Google');
});
});

Il n'y a pas besoin de charger des dépendances. Les classes page et navigateur de Puppeteer seront automatiquement exposées

Consultez la documentation.

Exemple personnalisé sans preset jest-puppeteer#

Vous pouvez également brancher votre puppeteer à partir de zéro. L'idée de base est :

  1. lancer & exposer le endpoint websocket de puppeteer avec Global Setup
  2. se connecter à puppeteer depuis chaque environnement de test
  3. fermer puppeteer avec Global Teardown

Voici un exemple du script GlobalSetup

// setup.js
const {mkdir, writeFile} = require('fs').promises;
const os = require('os');
const path = require('path');
const puppeteer = require('puppeteer');
const DIR = path.join(os.tmpdir(), 'jest_puppeteer_global_setup');
module.exports = async function () {
const browser = await puppeteer.launch();
// store the browser instance so we can teardown it later
// this global is only available in the teardown but not in TestEnvironments
global.__BROWSER_GLOBAL__ = browser;
// use the file system to expose the wsEndpoint for TestEnvironments
await mkdir(DIR, {recursive: true});
await writeFile(path.join(DIR, 'wsEndpoint'), browser.wsEndpoint());
};

Ensuite, nous avons besoin d'un environnement de test personnalisé pour puppeteer

// puppeteer_environment.js
const {readFile} = require('fs').promises;
const os = require('os');
const path = require('path');
const puppeteer = require('puppeteer');
const NodeEnvironment = require('jest-environment-node');
const DIR = path.join(os.tmpdir(), 'jest_puppeteer_global_setup');
class PuppeteerEnvironment extends NodeEnvironment {
constructor(config) {
super(config);
}
async setup() {
await super.setup();
// récupère le wsEndpoint
const wsEndpoint = await readFile(path.join(DIR, 'wsEndpoint'), 'utf8');
if (!wsEndpoint) {
throw new Error('wsEndpoint not found');
}
// se connecte à puppeteer
this.global.__BROWSER__ = await puppeteer.connect({
browserWSEndpoint: wsEndpoint,
});
}
async teardown() {
await super.teardown();
}
runScript(script) {
return super.runScript(script);
}
}
module.exports = PuppeteerEnvironment;

Enfin, nous pouvons fermer l'instance puppeteer et nettoyer le fichier

// teardown.js
const fs = require('fs').promises;
const os = require('os');
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
await fs.rm(DIR, {recursive: true, force: true});
};

Avec toutes les choses mises en place, nous pouvons maintenant écrire nos tests comme ceci :

// 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('doit être chargé sans erreur', async () => {
const text = await page.evaluate(() => document.body.textContent);
expect(text).toContain('google');
});
},
timeout,
);

Enfin, configurez jest.config.js pour lire ces fichiers. (Le preset jest-puppeteer fait quelque chose comme ça sous le capot.)

module.exports = {
globalSetup: './setup.js',
globalTeardown: './teardown.js',
testEnvironment: './puppeteer_environment.js',
};

Voici le code de l'exemple de travail complet.