NOTE: still a work-in-progress!
Run Jest tests in a real browser! No more fake DOM! This Jest environment uses puppeteer to run tests in both headless and windowed Chrome/Chromium.
It also adds a bunch of helpful global functions for manipulating/asserting against real DOM nodes.
Assuming you already have a project with some Jest tests (like one created with Create React App):
yarn add -D jest-browserIn your package.json, under a top-level key called "jest", you'll need to set this option:
"jest": {
"preset": "jest-browser"
}If you're using Create React App, you'll have to eject in order to set the "preset" option.
jest-browser can be configured by creating a file called browser.config.js at your project root. It should look something like this:
module.exports = {
headless: false,
verbose: true,
executablePath:
'C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe'
};Whether or not to run headless Chrome/Chromium (if false, it'll open a new window).
A path to an installed version of Chrome or Chromium somewhere on your computer. If not provided, the tests will use the bundled version of Chromium that ships with the puppeteer module.
Whether or not to log some information as the tests are running. Might be useful for debugging, if something isn't working right.
Until the rest of the API/options are stabilized, look here for the most up-to-date list of options and defaults.
Run the tests for the project like this:
yarn test