Utilisation avec Puppeteer

Traduction Bêta Non Officielle

Cette page a été traduite par PageTurner AI (bêta). Non approuvée officiellement par le projet. Vous avez trouvé une erreur ? Signaler un problème →

Grâce aux API de Configuration globale/Extinction et d'Environnement de test asynchrone, Jest fonctionne parfaitement avec Puppeteer.

note

La génération de couverture de code pour les tests utilisant Puppeteer est actuellement impossible si votre test emploie page.$eval, page.$$eval ou page.evaluate, car la fonction transmise s'exécute en dehors du périmètre de Jest. Consultez l'issue #7962 sur GitHub pour une solution de contournement.

Utiliser le préréglage jest-puppeteer

Jest Puppeteer fournit toute la configuration nécessaire pour exécuter vos tests avec Puppeteer.

1. Commencez par installer jest-puppeteer

npm

npm install --save-dev jest-puppeteer

Yarn

yarn add --dev jest-puppeteer

pnpm

pnpm add --save-dev jest-puppeteer

Bun

bun add --dev jest-puppeteer

2. Spécifiez ce préréglage dans votre configuration Jest :

{
  "preset": "jest-puppeteer"
}

3. Écrivez votre test

describe('Google', () => {
  beforeAll(async () => {
    await page.goto('https://google.com');
  });

  it('should be titled "Google"', async () => {
    await expect(page.title()).resolves.toMatch('Google');
  });
});

Aucune dépendance supplémentaire n'est requise. Les classes page et browser de Puppeteer seront automatiquement exposées

Consultez la documentation.

Exemple personnalisé sans préréglage jest-puppeteer

Vous pouvez aussi configurer Puppeteer manuellement. L'approche fondamentale consiste à :

1. Lancer Puppeteer et enregistrer son endpoint WebSocket via Global Setup

2. Vous connecter à Puppeteer depuis chaque environnement de test

3. Fermer Puppeteer avec Global Teardown

Voici un exemple de 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
  globalThis.__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 créons 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').TestEnvironment;

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 = await readFile(path.join(DIR, 'wsEndpoint'), 'utf8');
    if (!wsEndpoint) {
      throw new Error('wsEndpoint not found');
    }

    // connect to puppeteer
    this.global.__BROWSER_GLOBAL__ = await puppeteer.connect({
      browserWSEndpoint: wsEndpoint,
    });
  }

  async teardown() {
    if (this.global.__BROWSER_GLOBAL__) {
      this.global.__BROWSER_GLOBAL__.disconnect();
    }
    await super.teardown();
  }

  getVmContext() {
    return super.getVmContext();
  }
}

module.exports = PuppeteerEnvironment;

Finalement, 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 globalThis.__BROWSER_GLOBAL__.close();

  // clean-up the wsEndpoint file
  await fs.rm(DIR, {recursive: true, force: true});
};

Une fois tout configuré, nous pouvons écrire nos tests ainsi :

test.js

const timeout = 5000;

describe(
  '/ (Home Page)',
  () => {
    let page;
    beforeAll(async () => {
      page = await globalThis.__BROWSER_GLOBAL__.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,
);

Pour terminer, configurez jest.config.js pour utiliser ces fichiers. (Le préréglage jest-puppeteer fonctionne similairement en interne.)

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

Voici le code d'un exemple complet fonctionnel.