refactor: use react jsx transform

.eslintrc

@@ -14,6 +14,7 @@
     "react-native/no-inline-styles": "off",
     "react-native-a11y/has-valid-accessibility-descriptors": "off",
     "react-native-a11y/has-valid-accessibility-ignores-invert-colors": 0,
-    "react-native-a11y/has-valid-accessibility-value": "off"
+    "react-native-a11y/has-valid-accessibility-value": "off",
+    "react/react-in-jsx-scope": "off"
   }
 }

babel.config.js

@@ -1,9 +1,10 @@
 module.exports = {
   presets: [
     '@babel/preset-typescript',
-    '@babel/preset-react',
+    ['@babel/preset-react', { runtime: 'automatic' }],
     [
       '@babel/preset-env',
+
       {
         targets: {
           node: '14',

src/__tests__/fireEvent-textInput.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Text, TextInput, TextInputProps } from 'react-native';
 import { render, fireEvent } from '..';
 

src/__tests__/renderHook.test.tsx

@@ -1,12 +1,18 @@
-import React, { ReactNode } from 'react';
+import {
+  ReactNode,
+  createContext,
+  useContext,
+  useEffect,
+  useState,
+} from 'react';
 import TestRenderer from 'react-test-renderer';
 import { renderHook } from '../pure';
 
 test('gives comitted result', () => {
   const { result } = renderHook(() => {
-    const [state, setState] = React.useState(1);
+    const [state, setState] = useState(1);
 
-    React.useEffect(() => {
+    useEffect(() => {
       setState(2);
     }, []);
 
@@ -19,8 +25,8 @@ test('gives comitted result', () => {
 test('allows rerendering', () => {
   const { result, rerender } = renderHook(
     (props: { branch: 'left' | 'right' }) => {
-      const [left, setLeft] = React.useState('left');
-      const [right, setRight] = React.useState('right');
+      const [left, setLeft] = useState('left');
+      const [right, setRight] = useState('right');
 
       // eslint-disable-next-line jest/no-if
       switch (props.branch) {
@@ -46,13 +52,13 @@ test('allows rerendering', () => {
 });
 
 test('allows wrapper components', async () => {
-  const Context = React.createContext('default');
+  const Context = createContext('default');
   function Wrapper({ children }: { children: ReactNode }) {
     return <Context.Provider value="provided">{children}</Context.Provider>;
   }
   const { result } = renderHook(
     () => {
-      return React.useContext(Context);
+      return useContext(Context);
     },
     {
       wrapper: Wrapper,
@@ -106,7 +112,7 @@ test('does render only once', () => {
   jest.spyOn(TestRenderer, 'create');
 
   renderHook(() => {
-    const [state, setState] = React.useState(1);
+    const [state, setState] = useState(1);
     return [state, setState];
   });
 

src/__tests__/waitForElementToBeRemoved.test.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { View, Text, TouchableOpacity } from 'react-native';
 import { render, fireEvent, waitForElementToBeRemoved } from '..';
 

src/helpers/__tests__/accessiblity.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {
   View,
   Text,

src/helpers/__tests__/component-tree.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { View, Text, TextInput } from 'react-native';
 import { render } from '../..';
 import {

src/helpers/__tests__/includeHiddenElements.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { View } from 'react-native';
 import { configure, render, screen } from '../..';
 

src/matchers/__tests__/to-be-checked.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { type AccessibilityRole, View } from 'react-native';
 import render from '../../render';
 import { screen } from '../../screen';

src/matchers/__tests__/to-be-disabled.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {
   Button,
   Pressable,

src/matchers/__tests__/to-be-empty-element.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { View } from 'react-native';
 import { render, screen } from '../..';
 import '../extend-expect';

src/matchers/__tests__/to-be-partially-checked.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { type AccessibilityRole, View } from 'react-native';
 import render from '../../render';
 import { screen } from '../../screen';

src/matchers/__tests__/to-have-prop.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { View, Text, TextInput } from 'react-native';
 import { render, screen } from '../..';
 import '../extend-expect';

src/matchers/__tests__/utils.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { View } from 'react-native';
 import { render } from '../..';
 import { formatElement, checkHostElement } from '../utils';

src/queries/__tests__/testId.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { View, Text, TextInput, Button } from 'react-native';
 import { render } from '../..';
 

src/user-event/press/__tests__/longPress.real-timers.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Pressable, Text } from 'react-native';
 import { render, screen } from '../../../pure';
 import { userEvent } from '../..';

src/user-event/press/__tests__/longPress.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Pressable, Text } from 'react-native';
 import { render, screen } from '../../../pure';
 import { userEvent } from '../..';

tsconfig.json

@@ -4,7 +4,7 @@
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
     "skipLibCheck": true,
-    "jsx": "react",
+    "jsx": "react-jsx",
     "target": "ES2020",
     "lib": ["ES2020", "DOM"],
     "module": "commonjs",