jest-expo-enzyme
⚠️ This library is deprecated, Enzyme does not support React 18+. Use @testing-library/react-native instead.
A Jest preset that enables you to test your universal Expo & React elements with the Enzyme testing library.
The default preset extends jest-expo
which means it will run iOS, Android, and web platforms with the recommended Enzyme configs for web and native. Notice that we omit the node
runner because SSR environments don't need to test how virtual DOM is rendered.
Installation
-
yarn add jest-expo-enzyme --dev
ornpm i jest-expo-enzyme --save-dev
-
Add the following config to
package.json
:"scripts": { "test": "jest", }, "jest": { "preset": "jest-expo-enzyme" }
-
Create a
__tests__
directory anywhere you like and aExample-test.js
file inside of it, and add this code:it('works', () => { expect(1).toBe(1); });
-
Run
yarn test
ornpm test
and it should pass
Enzyme Example
The main benefit of using this preset is to get universal Enzyme support for testing your virtual DOM. Here is a basic example of testing how the backgroundColor
property of a View style is rendered across iOS, Android, and web.
import { shallow } from 'enzyme';
import React from 'react';
import { View, StyleSheet, Platform } from 'react-native';
it(`renders a view with a custom background`, () => {
const component = shallow(<View style={{ backgroundColor: 'rgba(0,0,0,0.5)' }} />);
// To debug your component use this:
console.log('Component:', component.debug({ verbose: true }));
// When snapshot testing, you should always try and be as concise as possible
// here we are extracting the style prop from `View` on native and `div` on web
const prop = component.find(Platform.select({ default: 'View', web: 'div' })).prop('style');
// Flatten the style so we can read it as an object
const style = StyleSheet.flatten(prop);
/**
* Android: exports[`renders a view with a custom background 1`] = `"rgba(0,0,0,0.5)"`;
* iOS: exports[`renders a view with a custom background 1`] = `"rgba(0,0,0,0.5)"`;
* web: exports[`renders a view with a custom background 1`] = `"rgba(0,0,0,0.50)"`;
*/
expect(style.backgroundColor).toMatchSnapshot();
});
Customization
When constructing your tests you will more than likely want to build them one platform at a time. To do this you'll want to create a jest.config.js
with multiple platforms.
This is done by specifying a separate Jest config in the projects
field of your custom Jest config. The withEnzyme
method's purpose is to let you augment each single-platform Jest config with the configuration fields needed to support Enzyme.
This is why method withEnzyme
exists.
You can use withEnzyme
to add Enzyme support to an existing Jest config (important: this is only officially supported with Jest configs provided by jest-expo
; mixing with other configs may not work as expected). Also use a custom serializer for the React Native StyleSheet API, which will make snapshot tests cleaner and easier to read.
Usage
- Create a
jest.config.js
in your root directory and delete thejest
field in yourpackage.json
. You can also create anyjs
file and pass it to the Jest CLI with the-c
flag, ex:yarn jest -c custom.config.js
. - Import the platforms you want to test and add Enzyme support:
const { withEnzyme } = require('jest-expo-enzyme');
module.exports = {
projects: [
// Skipping Node because we want to test DOM presets only
withEnzyme(require('jest-expo/ios/jest-preset')),
withEnzyme(require('jest-expo/android/jest-preset')),
// The Enzyme support added to web is different from that added to native, which `withEnzyme` handles
// Luckily you won't have to do anything special because it reads the platform from
// `haste.defaultPlatform` of the provided Jest config
withEnzyme(require('jest-expo/web/jest-preset')),
],
};
- Run your tests with this new preset!
Snapshots
jest-expo-enzyme
wraps jest-expo
which means you get access to the advanced multi-platform snapshot system required for truly testing your universal application code.
Here is an example output:
|- View-test.tsx
|-- __snapshots__/View-test.tsx.snap.android
|-- __snapshots__/View-test.tsx.snap.ios
|-- __snapshots__/View-test.tsx.snap.node
|-- __snapshots__/View-test.tsx.snap.web
Extensions
To test specific platforms you can use the following extensions:
- iOS:
-test.ios.*
,-test.native.*
- Android:
-test.android.*
,-test.native.*
- web:
-test.web.*
- Node:
-test.node.*
,-test.web.*