Skip to main content

Getting Started

React Native Version Support​

React Native OWL currently supports React Native versions up to 0.70.x.

Installation​

Install react-native-owl using either yarn or npm:

npm install --save-dev react-native-owl

Configuration​

Create a file called owl.config.json in the root of your project, next to your package.json. There you will have to specify your settings for iOS and Android. For more information on the config file, please refer to the configuration file documentation.

Below you can find an example config (can also be found in the example app of the repository).

owl.config.json
{
  "ios": {
    "workspace": "ios/OwlDemo.xcworkspace",
    "scheme": "OwlDemo",
    "configuration": "Release",
    "device": "iPhone 13 Pro"
  },
  "android": {
    "packageName": "com.owldemo"
  }
}

ts-jest​

You'll also need to add the ts-jest preset to your Jest config if you plan to write your tests in Typescript:

npm install --save-dev ts-jest

Then update your Jest config to use the ts-jest preset:

jest.config.js
"preset": "ts-jest"

or

package.json
"jest": {
  "preset": "ts-jest"
}

Add tests​

Use the takeScreenshot and .toMatchBaseline apis to implement screenshot tests. File names must end in .owl.ts, .owl.tsx, .owl.js or .owl.jsx. See the example app for a more complete example.

Example​

app.owl.tsx
import { press, takeScreenshot } from 'react-native-owl';

describe('App.tsx', () => {
  it('takes a screenshot of the first screen', async () => {
    const screen = await takeScreenshot('homescreen');

    expect(screen).toMatchBaseline();
  });

  it('presses a button, then takes a screenshot', async () => {
    await press('button')

    const screen = await takeScreenshot('afterButtonPress');

    expect(screen).toMatchBaseline();
  });
});

Building the app​

Before the app can be tested, it must be built.

npx owl build --platform ios
info

You will need to manually start the correct simulator before the tests are run.

This runs the app on the simulator, either comparing screenshots with the baseline images, or updating the baseline images.

When comparing images, any difference in the current vs baseline will fail the test.

Examples​

Test against the baseline images (will create the baseline images if they don't exist).

npx owl test --platform ios

Update the baseline images

npx owl test --platform ios --update

Failed tests report​

When the tests have failed any .toMatchBaseline() expectations, a report is generated, where you can view all the screenshots, where the differences in the current vs baseline screenshots will be highlighted.