Remove enzyme

Author: necolas

package.json

@@ -41,9 +41,6 @@
     "caniuse-api": "^3.0.0",
     "cross-env": "^6.0.3",
     "del-cli": "^3.0.0",
-    "enzyme": "^3.10.0",
-    "enzyme-adapter-react-16": "^1.14.0",
-    "enzyme-to-json": "^3.4.2",
     "eslint": "^6.5.1",
     "eslint-config-prettier": "^6.4.0",
     "eslint-plugin-promise": "^4.2.1",

packages/react-native-web/src/exports/ScrollView/__tests__/__snapshots__/index-test.js.snap

@@ -1,44 +1,5 @@
 /* eslint-env jasmine, jest */
 
-import React from 'react';
-import ScrollView from '..';
-import StyleSheet from '../../StyleSheet';
-import View from '../../View';
-import { mount, shallow } from 'enzyme';
-
 describe('components/ScrollView', () => {
-  test('instance method setNativeProps', () => {
-    const instance = mount(<ScrollView />).instance();
-    expect(() => {
-      instance.setNativeProps();
-    }).not.toThrow();
-  });
-
-  test('"children" prop', () => {
-    const component = shallow(
-      <ScrollView>
-        <View testID="child" />
-      </ScrollView>
-    );
-    expect(component.find({ testID: 'child' }).length).toBe(1);
-
-    component.setProps({ stickyHeaderIndices: [4] });
-    expect(component.find({ testID: 'child' }).length).toBe(1);
-
-    component.setProps({ pagingEnabled: true });
-    expect(component.find({ testID: 'child' }).length).toBe(1);
-  });
-
-  test('"pagingEnabled" prop', () => {
-    const getStyleProp = (component, prop) => StyleSheet.flatten(component.prop('style'))[prop];
-
-    // false
-    const component = shallow(<ScrollView children={'Child'} />);
-    expect(getStyleProp(component, 'scrollSnapType')).toMatchSnapshot();
-
-    // true
-    component.setProps({ pagingEnabled: true });
-    expect(getStyleProp(component, 'scrollSnapType')).toMatchSnapshot();
-    expect(getStyleProp(component.children().childAt(0), 'scrollSnapAlign')).toMatchSnapshot();
-  });
+  test.skip('todo', () => {});
 });

packages/react-native-web/src/exports/ScrollView/__tests__/index-test.js

@@ -1,8 +1,8 @@
 /* eslint-env jasmine, jest */
 
 import React from 'react';
-import { render } from '@testing-library/react';
 import View from '../';
+import { render } from '@testing-library/react';
 
 describe('components/View', () => {
   test('default', () => {

packages/react-native-web/src/exports/View/__tests__/index-test.js

@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`modules/createElement renders different DOM elements 1`] = `<span />`;
+exports[`exports/createElement renders different DOM elements 1`] = `<span />`;
 
-exports[`modules/createElement renders different DOM elements 2`] = `<main />`;
+exports[`exports/createElement renders different DOM elements 2`] = `<main />`;

packages/react-native-web/src/exports/createElement/__tests__/__snapshots__/index-test.js.snap

@@ -2,41 +2,39 @@
 
 import createElement from '..';
 import React from 'react';
-import { render, shallow } from 'enzyme';
+import { render } from '@testing-library/react';
 
-describe('modules/createElement', () => {
+describe('exports/createElement', () => {
   test('renders different DOM elements', () => {
-    let component = render(createElement('span'));
-    expect(component).toMatchSnapshot();
-    component = render(createElement('main'));
-    expect(component).toMatchSnapshot();
+    let { container } = render(createElement('span'));
+    expect(container.firstChild).toMatchSnapshot();
+    ({ container } = render(createElement('main')));
+    expect(container.firstChild).toMatchSnapshot();
   });
 
   describe('prop "accessibilityRole"', () => {
-    test('and string component type', () => {
-      const component = shallow(createElement('span', { accessibilityRole: 'link' }));
-      expect(component.find('a').length).toBe(1);
+    test('string component type', () => {
+      const { container } = render(createElement('span', { accessibilityRole: 'link' }));
+      expect(container.firstChild.nodeName).toBe('A');
     });
 
-    test('and function component type', () => {
+    test('function component type', () => {
       const Custom = () => <div />;
-      const component = shallow(createElement(Custom, { accessibilityRole: 'link' }));
-      expect(component.find('div').length).toBe(1);
+      const { container } = render(createElement(Custom, { accessibilityRole: 'link' }));
+      expect(container.firstChild.nodeName).toBe('DIV');
     });
 
     const testRole = ({ accessibilityRole, disabled }) => {
       [{ key: 'Enter' }, { key: ' ' }].forEach(({ key }) => {
         test(`"onClick" is ${disabled ? 'not ' : ''}called when "${key}" key is pressed`, () => {
           const onClick = jest.fn();
-          const component = shallow(
+          const { container } = render(
             createElement('span', { accessibilityRole, disabled, onClick })
           );
-          component.find('span').simulate('keyPress', {
-            isDefaultPrevented() {},
-            nativeEvent: {},
-            preventDefault() {},
-            key
-          });
+          const event = document.createEvent('CustomEvent');
+          event.initCustomEvent('keydown', true, true);
+          event.key = key;
+          container.firstChild.dispatchEvent(event);
           expect(onClick).toHaveBeenCalledTimes(disabled ? 0 : 1);
         });
       });

packages/react-native-web/src/exports/createElement/__tests__/index-test.js

@@ -12,7 +12,6 @@ module.exports = {
   roots: ['<rootDir>/packages'],
   setupFiles: ['jest-canvas-mock', require.resolve('./setupFiles.js')],
   setupFilesAfterEnv: [require.resolve('./setupFramework.js')],
-  snapshotSerializers: ['enzyme-to-json/serializer'],
   testEnvironment: 'jsdom',
   timers: 'fake'
 };

scripts/jest/config.js

@@ -1,10 +1 @@
 /* eslint-env jasmine, jest */
-
-import Adapter from 'enzyme-adapter-react-16';
-import Enzyme from 'enzyme';
-import serializer from './serializer';
-
-Enzyme.configure({ adapter: new Adapter() });
-
-// TODO: move off legacy serializer
-expect.addSnapshotSerializer(serializer);