jest-expo-puppeteer

Run end-to-end tests on your Expo web projects with Jest, Puppeteer, and the Expo CLI. This library wraps jest-puppeteer and reads info from your project's app.json to configure it correctly for development and production builds. This library will automatically configure your project to run Puppeteer correctly in CI.

Installation

• yarn add jest-expo-puppeteer puppeteer --dev or npm i jest-expo-puppeteer puppeteer --save-dev

• Add the following config to package.json:

  "scripts": {
    "test": "jest",
    "test:prod": "EXPO_WEB_E2E_ENV=production jest"
  },
  "jest": {
    // You should use jest-expo-puppeteer as your preset which wraps jest-puppeteer and adds minor changes (subject to change in the future)
    "preset": "jest-expo-puppeteer"
    // You could also just use `jest-puppeteer` preset but this may have unexpected behavior
    "preset": "jest-puppeteer"
  }
  

• Create a jest-puppeteer.config.js file in your root directory:

  // For testing
  const { withExpoPuppeteer } = require('jest-expo-puppeteer');
  
  module.exports = withExpoPuppeteer({
    // Configure...
  });
  

• Create a __tests__ directory anywhere you like and a Example-test.js file inside of it, and add this code:

  // Import the config so we can find the host URL
  import config from '../jest-puppeteer.config';
  
  let response;
  
  beforeEach(async () => {
    // Jest puppeteer exposes the page object from Puppeteer
    response = await page.goto(config.url);
  });
  
  it(`should match a text element`, async () => {
    // Target elements and test their properties
    await expect(page).toMatchElement('div[data-testid="basic-text"]', {
      text: 'Open up App.js to start working on your app!',
    });
  });
  

• Run yarn test and it should pass in development mode by starting expo-cli, puppeteer, and jest then executing the Jest tests

Customization

You can customize the jest-dev-server, puppeteer, and expo-cli options from the jest-puppeteer.config.js file:

const { withExpoPuppeteer } = require('jest-expo-puppeteer');

module.exports = withExpoPuppeteer({
  // development will run `expo start`
  // production will run `expo build:web` then serve the static bundle
  // this value can also be defined inline with `process.env.EXPO_WEB_E2E_ENV`
  // This is "development" by default
  mode: 'development' | 'production' | process.env.EXPO_WEB_E2E_ENV,
  // Used with `mode: 'production'` to skip the build phase if the output folder exists.
  // This is useful for debugging. This is false by default
  preventRebuild: boolean,
  // The relative path for the expo project you want to run. This is `process.cwd()` by default (root directory)
  projectRoot: string,

  // The jest dev server config options: https://github.com/smooth-code/jest-puppeteer/tree/master/packages/jest-dev-server#options
  server: Object,

  // The rest of the puppeteer config options: https://github.com/smooth-code/jest-puppeteer#configure-puppeteer
  ...jestPuppeteerConfig,
});

Running in watch mode

Because jest-puppeteer doesn't start the server in watch mode you will need to start the Webpack server manually. A simple way to do this is by opening a new terminal window and running: WEB_PORT=5000 npx expo start --https. For usage with non-expo frameworks, you'll need to change the port to 8000 or whichever port your tool recommends.

Usage in Circle CI

This library is built to work with continuous integration, just ensure you are using a Docker image that works with Puppeteer, ex: circleci/node:latest-browsers

jobs:
  web:
    # A Docker image that works with Puppeteer
    docker:
      - image: circleci/node:latest-browsers
    shell: /bin/bash -leo pipefail
    resource_class: small
    environment:
      USER: circleci
    steps:
      - checkout
      # Running this preset will check for the existence of node modules before running.
      - run: yarn test

Resources

Jest documentation Jest Puppeteer documentation Puppeteer server options connect options launch options