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
ornpm 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 aExample-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 startingexpo-cli
,puppeteer
, andjest
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