diff --git a/packages/react-native-web/jest-preset.json b/packages/react-native-web/jest-preset.json new file mode 100644 index 000000000..d8bb7ebf1 --- /dev/null +++ b/packages/react-native-web/jest-preset.json @@ -0,0 +1,9 @@ +{ + "moduleNameMapper": { + "^react-native$": "/node_modules/react-native-web/dist/cjs" + }, + "setupFiles": [ + "/node_modules/react-native-web/jest/setup.js" + ], + "testEnvironment": "jsdom" +} diff --git a/packages/react-native-web/jest/__tests__/__snapshots__/serializer-test.js.snap b/packages/react-native-web/jest/__tests__/__snapshots__/serializer-test.js.snap deleted file mode 100644 index 809766dc9..000000000 --- a/packages/react-native-web/jest/__tests__/__snapshots__/serializer-test.js.snap +++ /dev/null @@ -1,299 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`enzyme complex: enzyme.mount complex 1`] = ` - - - - Nested - - - } -> - -
- - <Text - style={ - Object { - "color": "black", - "fontSize": 16, - "textAlignVertical": "center", - } - } - > - <div - className="rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-color-cqee49 rn-display-1471scf rn-fontFamily-14xgk7a rn-fontSize-ubezar rn-fontStyle-o11vmf rn-fontVariant-ebii48 rn-fontWeight-gul640 rn-lineHeight-t9a87b rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-verticalAlign-9iso6 rn-textDecoration-bauka4 rn-whiteSpace-q42fyq rn-wordWrap-qvutc0" - dir="auto" - > - Hello World - </div> - </Text> - - -
- -
- - -
- Nested -
- -
- -
- - -`; - -exports[`enzyme complex: enzyme.render complex 1`] = ` -
-
- Hello World -
-
-
-
- Nested -
-
-
-`; - -exports[`enzyme complex: enzyme.shallow complex 1`] = ` - - - Hello World - - - - - Nested - - - -`; - -exports[`enzyme composite: enzyme.mount composite 1`] = ` - - -
- - -`; - -exports[`enzyme composite: enzyme.render composite 1`] = ` -
-`; - -exports[`enzyme composite: enzyme.shallow composite 1`] = ` - -`; - -exports[`enzyme nested: enzyme.mount nested 1`] = ` - - -
- - <Text - style={ - Object { - "color": "black", - "fontSize": 16, - "textAlignVertical": "center", - } - } - > - <div - className="rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-color-cqee49 rn-display-1471scf rn-fontFamily-14xgk7a rn-fontSize-ubezar rn-fontStyle-o11vmf rn-fontVariant-ebii48 rn-fontWeight-gul640 rn-lineHeight-t9a87b rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-verticalAlign-9iso6 rn-textDecoration-bauka4 rn-whiteSpace-q42fyq rn-wordWrap-qvutc0" - dir="auto" - > - Hello World - </div> - </Text> - -
- - -`; - -exports[`enzyme nested: enzyme.render nested 1`] = ` -
-
- Hello World -
-
-`; - -exports[`enzyme nested: enzyme.shallow nested 1`] = ` - - - Hello World - - -`; - -exports[`enzyme noop: enzyme.mount noop 1`] = ` - -
- -`; - -exports[`enzyme noop: enzyme.render noop 1`] = ` -
-`; - -exports[`enzyme noop: enzyme.shallow noop 1`] = ` -
-`; - -exports[`react-test-renderer complex 1`] = ` -
-
- Hello World -
-
-
-
- Nested -
-
-
-`; - -exports[`react-test-renderer composite 1`] = ` -
-`; - -exports[`react-test-renderer nested 1`] = ` -
-
- Hello World -
-
-`; - -exports[`react-test-renderer noop 1`] = ` -
-`; diff --git a/packages/react-native-web/jest/__tests__/serializer-test.js b/packages/react-native-web/jest/__tests__/serializer-test.js deleted file mode 100644 index f34605d66..000000000 --- a/packages/react-native-web/jest/__tests__/serializer-test.js +++ /dev/null @@ -1,92 +0,0 @@ -/* eslint-env jasmine, jest */ -/* eslint-disable react/prop-types */ - -import { mount, render, shallow } from 'enzyme'; -import React from 'react'; -import renderer from 'react-test-renderer'; -import { StyleSheet, Text, View } from '../../src'; -import toJson from 'enzyme-to-json'; - -/** - * Fixtures - */ - -const Box = ({ children, element, style, ...rest }) => ( - - {children} - {element} - -); - -const Title = ({ style, ...rest }) => ; - -const styles = StyleSheet.create({ - box: { - backgroundColor: 'red', - padding: 10 - }, - boxExtra: { - alignItems: 'center' - }, - title: { - color: 'black', - fontSize: 16, - textAlignVertical: 'center' - }, - element: { - padding: 20 - } -}); - -/** - * Test cases - */ - -const cases = { - noop: , - composite: , - nested: ( - - Hello World - - ), - complex: ( - - - Nested - - } - > - Hello World - - ) -}; - -const caseNames = Object.keys(cases); - -describe('enzyme', () => { - caseNames.forEach(caseName => { - test(caseName, () => { - const element = cases[caseName]; - const mountTree = mount(element); - const renderTree = render(element); - const shallowTree = shallow(element); - - expect(toJson(mountTree)).toMatchSnapshot(`enzyme.mount ${caseName}`); - expect(toJson(renderTree)).toMatchSnapshot(`enzyme.render ${caseName}`); - expect(toJson(shallowTree)).toMatchSnapshot(`enzyme.shallow ${caseName}`); - }); - }); -}); - -describe('react-test-renderer', () => { - caseNames.forEach(caseName => { - test(caseName, () => { - const element = cases[caseName]; - const tree = renderer.create(element).toJSON(); - expect(tree).toMatchSnapshot(); - }); - }); -}); diff --git a/packages/react-native-web/jest/serializer.js b/packages/react-native-web/jest/serializer.js deleted file mode 100644 index 8c462ee37..000000000 --- a/packages/react-native-web/jest/serializer.js +++ /dev/null @@ -1,6 +0,0 @@ -const createSerializer = require('./createSerializer'); -const { StyleSheet } = require('../dist'); - -const serializer = createSerializer(StyleSheet); - -module.exports = serializer; diff --git a/packages/react-native-web/jest/setup.js b/packages/react-native-web/jest/setup.js new file mode 100644 index 000000000..445afa86c --- /dev/null +++ b/packages/react-native-web/jest/setup.js @@ -0,0 +1,18 @@ +/* eslint-env jasmine, jest */ + +'use strict'; + +global.__DEV__ = true; + +const mockEmptyObject = {}; + +// Make sure snapshots contain the original style objects +jest.mock('../dist/cjs/modules/ReactNativePropRegistry', () => ({ + register: id => id, + getByID: () => mockEmptyObject +})); + +jest.mock('../dist/modules/ReactNativePropRegistry', () => ({ + register: id => id, + getByID: () => mockEmptyObject +})); diff --git a/packages/react-native-web/jest/createSerializer.js b/scripts/jest/serializer.js similarity index 89% rename from packages/react-native-web/jest/createSerializer.js rename to scripts/jest/serializer.js index 570c680b0..40cf2aa8a 100644 --- a/packages/react-native-web/jest/createSerializer.js +++ b/scripts/jest/serializer.js @@ -1,4 +1,5 @@ -const React = require('react'); +import React from 'react'; +import { StyleSheet } from '../../packages/react-native-web/src'; function createSerializer(styleSheet) { function flattenNodeStyles(node) { @@ -53,4 +54,6 @@ function createSerializer(styleSheet) { return { test, print }; } -module.exports = createSerializer; +const serializer = createSerializer(StyleSheet); + +export default serializer; diff --git a/scripts/jest/setupFramework.js b/scripts/jest/setupFramework.js index 1bb126d03..d867bfb94 100644 --- a/scripts/jest/setupFramework.js +++ b/scripts/jest/setupFramework.js @@ -2,10 +2,9 @@ import Adapter from 'enzyme-adapter-react-16'; import Enzyme from 'enzyme'; -import createSerializer from '../../packages/react-native-web/jest/createSerializer'; -import { StyleSheet } from '../../packages/react-native-web/src'; - -const serializer = createSerializer(StyleSheet); +import serializer from './serializer'; Enzyme.configure({ adapter: new Adapter() }); + +// TODO: move off legacy serializer expect.addSnapshotSerializer(serializer);