Add support for testing with react@17 (#1115)

* Add support for testing with react@17

* Test with react@17 through a script updating dependencies

* Use test:ci command also for react@17

* Minor adjustements to script

* Update scripts/test_react_17

Co-authored-by: Maciej Jastrzebski <[email protected]>

Author: AugustinLF

.circleci/config.yml

@@ -58,6 +58,13 @@ jobs:
       - store_artifacts:
           path: coverage
           destination: coverage
+  test:react:17:
+    <<: *defaults
+    steps:
+      - attach_workspace:
+          at: ~/react-native-testing-library
+      - run: |
+          yarn test:ci:react:17
   test-website:
     <<: *defaults
     steps:
@@ -91,6 +98,9 @@ workflows:
       - tests:
           requires:
             - install-dependencies
+      - test:react:17:
+          requires:
+            - install-dependencies
       - test-website:
           requires:
             - install-dependencies

package.json

@@ -72,6 +72,7 @@
     "clean": "del build",
     "test": "jest",
     "test:ci": "jest --maxWorkers=2",
+    "test:ci:react:17": "scripts/test_react_17",
     "typecheck": "tsc",
     "flow": "flow",
     "copy-flowtypes": "cp typings/index.flow.js build",

scripts/test_react_17

@@ -0,0 +1,12 @@
+#!/usr/bin/env bash
+
+cp yarn.lock yarn.lock.backup
+cp package.json package.json.backup
+
+yarn add -D [email protected] [email protected] [email protected] --ignore-scripts
+yarn test:ci
+
+mv package.json.backup package.json
+mv yarn.lock.backup yarn.lock
+
+yarn --ignore-scripts

src/__tests__/render.test.tsx

@@ -205,7 +205,7 @@ test('debug changing component', () => {
 test('renders options.wrapper around node', () => {
   type WrapperComponentProps = { children: React.ReactNode };
   const WrapperComponent = ({ children }: WrapperComponentProps) => (
-    <SafeAreaView testID="wrapper">{children}</SafeAreaView>
+    <View testID="wrapper">{children}</View>
   );
 
   const { toJSON, getByTestId } = render(<View testID="inner" />, {
@@ -214,20 +214,20 @@ test('renders options.wrapper around node', () => {
 
   expect(getByTestId('wrapper')).toBeTruthy();
   expect(toJSON()).toMatchInlineSnapshot(`
-    <RCTSafeAreaView
+    <View
       testID="wrapper"
     >
       <View
         testID="inner"
       />
-    </RCTSafeAreaView>
+    </View>
   `);
 });
 
 test('renders options.wrapper around updated node', () => {
   type WrapperComponentProps = { children: React.ReactNode };
   const WrapperComponent = ({ children }: WrapperComponentProps) => (
-    <SafeAreaView testID="wrapper">{children}</SafeAreaView>
+    <View testID="wrapper">{children}</View>
   );
 
   const { toJSON, getByTestId, rerender } = render(<View testID="inner" />, {
@@ -240,15 +240,15 @@ test('renders options.wrapper around updated node', () => {
 
   expect(getByTestId('wrapper')).toBeTruthy();
   expect(toJSON()).toMatchInlineSnapshot(`
-    <RCTSafeAreaView
+    <View
       testID="wrapper"
     >
       <View
         accessibilityHint="test"
         accessibilityLabel="test"
         testID="inner"
       />
-    </RCTSafeAreaView>
+    </View>
   `);
 });