window/document not defined in import

Hi,

I set up a jest-puppeteer project following the README. In my test file I import a library which works on browser DOM (document.querySelector() …) but I get the following error when running tests:

ReferenceError: document is not defined

So I tried to switch to jsdom by adding the following comments at the top of the file:

/**
 * @jest-environment jsdom
 */

But I then get the error:

ReferenceError: page is not defined

How can I do to import my library and still having browser/page puppeteer variables set ?

regards

[CreativeBulma]

I get it work by habving PuppeteerEnvironment extending JsdomEnvironment instead of NodeEnvironment

// const NodeEnvironment = require('jest-environment-node');
const JsdomEnvironment = require('jest-environment-jsdom');
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 JsdomEnvironment {
	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;

it is the right way to do it ?

[CreativeBulma]

I have to test a library which manipulate the DOM. And I’d like to test the API of this library directly within my puppeteer test file (some test are directly on the library API and some others are on the DOM in browser). But if I use NodeEnvironment my library won’t load due to document not defined error.