Nightly Perpetrated Mischief

    jest-expo-puppeteer

    1.4.2 • Public • Published

    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 expo start:web --https. For SSR you'll need to change the port to 8000.

    If you get the error "start:web" is not an expo command. See "expo --help" for the full list of commands. then you may need to update expo-cli (npm i -g expo-cli) or use the older command expo start --web-only.

    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

    Keywords

    none

    Install

    npm i jest-expo-puppeteer

    DownloadsWeekly Downloads

    25

    Version

    1.4.2

    License

    MIT

    Unpacked Size

    18.4 kB

    Total Files

    11

    Last publish

    Collaborators

    • christopherwalter
    • kbrandwijk
    • kgc00
    • fiber-god
    • ide
    • brentvatne
    • ccheever
    • evanbacon
    • quinlanj
    • esamelson
    • expoadmin
    • tsapeta
    • dsokal
    • tcdavis
    • exponent
    • wschurman
    • bbarthec
    • wkozyra
    • bycedric
    • lukmccall
    • jonsamp
    • princefleaswallow
    • andyboythekid
    • kudochien