sort imports (#1729)

Author: mdjastrzebski

eslint.config.mjs

@@ -1,5 +1,6 @@
 import tseslint from 'typescript-eslint';
 import callstackConfig from '@callstack/eslint-config/react-native.flat.js';
+import simpleImportSort from 'eslint-plugin-simple-import-sort';
 
 export default [
   {
@@ -14,9 +15,24 @@ export default [
   },
   ...callstackConfig,
   ...tseslint.configs.strict,
+  {
+    plugins: {
+      'simple-import-sort': simpleImportSort,
+    },
+    rules: {
+      'simple-import-sort/imports': [
+        'error',
+        {
+          groups: [['^\\u0000', '^react', '^@?\\w', '^', '^\\.']],
+        },
+      ],
+    },
+  },
   {
     rules: {
       'no-console': 'error',
+      'import/order': 'off',
+      '@typescript-eslint/consistent-type-imports': 'error',
     },
   },
   {

package.json

@@ -82,6 +82,7 @@
     "babel-plugin-module-resolver": "^5.0.2",
     "del-cli": "^6.0.0",
     "eslint": "^9.17.0",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
     "flow-bin": "~0.170.0",
     "jest": "^29.7.0",
     "prettier": "^2.8.8",

src/__tests__/config.test.ts

@@ -1,4 +1,4 @@
-import { getConfig, configure, resetToDefaults } from '../config';
+import { configure, getConfig, resetToDefaults } from '../config';
 
 beforeEach(() => {
   resetToDefaults();

src/__tests__/fire-event-textInput.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import { Text, TextInput, TextInputProps } from 'react-native';
-import { render, fireEvent, screen } from '..';
+import type { TextInputProps } from 'react-native';
+import { Text, TextInput } from 'react-native';
+import { fireEvent, render, screen } from '..';
 
 function WrappedTextInput(props: TextInputProps) {
   return <TextInput {...props} />;

src/__tests__/host-component-names.test.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { Image, Modal, ScrollView, Switch, Text, TextInput } from 'react-native';
+import { render, screen } from '..';
 import {
   isHostImage,
   isHostModal,
@@ -8,7 +9,6 @@ import {
   isHostText,
   isHostTextInput,
 } from '../helpers/host-component-names';
-import { render, screen } from '..';
 
 test('detects host Text component', () => {
   render(<Text>Hello</Text>);

src/__tests__/host-text-nesting.test.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { Text, Pressable, View } from 'react-native';
-import { render, within, screen } from '../pure';
+import { Pressable, Text, View } from 'react-native';
+import { render, screen, within } from '../pure';
 
 /**
  * Our queries interact differently with composite and host elements, and some specific cases require us

src/__tests__/react-native-animated.test.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { Animated, ViewStyle } from 'react-native';
+import type { ViewStyle } from 'react-native';
+import { Animated } from 'react-native';
 import { act, render, screen } from '..';
 
 type AnimatedViewProps = {

src/__tests__/render-hook.test.tsx

@@ -1,4 +1,5 @@
-import React, { ReactNode } from 'react';
+import type { ReactNode } from 'react';
+import React from 'react';
 import TestRenderer from 'react-test-renderer';
 import { renderHook } from '../pure';
 

src/__tests__/render-string-validation.test.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { View, Text, Pressable } from 'react-native';
-import { render, fireEvent, screen } from '..';
+import { Pressable, Text, View } from 'react-native';
+import { fireEvent, render, screen } from '..';
 
 // eslint-disable-next-line no-console
 const originalConsoleError = console.error;

src/__tests__/render.test.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { Pressable, Text, TextInput, View } from 'react-native';
-import { fireEvent, render, RenderAPI, screen } from '..';
+import type { RenderAPI } from '..';
+import { fireEvent, render, screen } from '..';
 
 const PLACEHOLDER_FRESHNESS = 'Add custom freshness';
 const PLACEHOLDER_CHEF = 'Who inspected freshness?';

src/__tests__/screen.test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { View, Text } from 'react-native';
+import { Text, View } from 'react-native';
 import { render, screen } from '..';
 
 test('screen has the same queries as render result', () => {

src/__tests__/wait-for.test.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { Text, TouchableOpacity, View, Pressable } from 'react-native';
-import { fireEvent, render, waitFor, configure, screen } from '..';
+import { Pressable, Text, TouchableOpacity, View } from 'react-native';
+import { configure, fireEvent, render, screen, waitFor } from '..';
 
 class Banana extends React.Component<any> {
   changeFresh = () => {

src/__tests__/within.test.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { View, Text, TextInput } from 'react-native';
-import { render, within, getQueriesForElement } from '..';
+import { Text, TextInput, View } from 'react-native';
+import { getQueriesForElement, render, within } from '..';
 
 test('within() exposes basic queries', async () => {
   const rootQueries = render(

src/act.ts

@@ -72,4 +72,4 @@ function withGlobalActEnvironment(actImplementation: ReactAct) {
 const act = withGlobalActEnvironment(reactAct) as ReactAct;
 
 export default act;
-export { setIsReactActEnvironment as setReactActEnvironment, getIsReactActEnvironment };
+export { getIsReactActEnvironment, setIsReactActEnvironment as setReactActEnvironment };

src/config.ts

@@ -1,4 +1,4 @@
-import { DebugOptions } from './helpers/debug';
+import type { DebugOptions } from './helpers/debug';
 
 /**
  * Global configuration options for React Native Testing Library.

src/fire-event.ts

@@ -1,18 +1,18 @@
-import { ReactTestInstance } from 'react-test-renderer';
-import {
-  ViewProps,
-  TextProps,
-  TextInputProps,
+import type {
   PressableProps,
   ScrollViewProps,
+  TextInputProps,
+  TextProps,
+  ViewProps,
 } from 'react-native';
+import type { ReactTestInstance } from 'react-test-renderer';
 import act from './act';
 import { isElementMounted, isHostElement } from './helpers/component-tree';
 import { isHostScrollView, isHostTextInput } from './helpers/host-component-names';
 import { isPointerEventEnabled } from './helpers/pointer-events';
 import { isEditableTextInput } from './helpers/text-input';
-import { Point, StringWithAutocomplete } from './types';
 import { nativeState } from './native-state';
+import type { Point, StringWithAutocomplete } from './types';
 
 type EventHandler = (...args: unknown[]) => unknown;
 

src/helpers/__tests__/accessiblity.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { View, Text, TextInput, Pressable, Switch, TouchableOpacity } from 'react-native';
-import { render, isHiddenFromAccessibility, isInaccessible, screen } from '../..';
+import { Pressable, Switch, Text, TextInput, TouchableOpacity, View } from 'react-native';
+import { isHiddenFromAccessibility, isInaccessible, render, screen } from '../..';
 import { computeAriaLabel, isAccessibilityElement } from '../accessibility';
 
 describe('isHiddenFromAccessibility', () => {

src/helpers/accessibility.ts

@@ -1,10 +1,5 @@
-import {
-  AccessibilityRole,
-  AccessibilityState,
-  AccessibilityValue,
-  Role,
-  StyleSheet,
-} from 'react-native';
+import type { AccessibilityRole, AccessibilityState, AccessibilityValue, Role } from 'react-native';
+import { StyleSheet } from 'react-native';
 import type { ReactTestInstance } from 'react-test-renderer';
 import { getHostSiblings, getUnsafeRootElement, isHostElement } from './component-tree';
 import { findAll } from './find-all';

src/helpers/component-tree.ts

@@ -1,4 +1,4 @@
-import { ReactTestInstance } from 'react-test-renderer';
+import type { ReactTestInstance } from 'react-test-renderer';
 import { screen } from '../screen';
 /**
  * ReactTestInstance referring to host element.

src/helpers/debug.ts

@@ -1,5 +1,6 @@
 import type { ReactTestRendererJSON } from 'react-test-renderer';
-import format, { FormatOptions } from './format';
+import type { FormatOptions } from './format';
+import format from './format';
 import { logger } from './logger';
 
 export type DebugOptions = {

src/helpers/find-all.ts

@@ -1,7 +1,8 @@
-import { ReactTestInstance } from 'react-test-renderer';
+import type { ReactTestInstance } from 'react-test-renderer';
 import { getConfig } from '../config';
 import { isHiddenFromAccessibility } from './accessibility';
-import { HostTestInstance, isHostElement } from './component-tree';
+import type { HostTestInstance } from './component-tree';
+import { isHostElement } from './component-tree';
 
 interface FindAllOptions {
   /** Match elements hidden from accessibility */

src/helpers/format-default.ts

@@ -1,4 +1,5 @@
-import { StyleSheet, ViewStyle } from 'react-native';
+import type { ViewStyle } from 'react-native';
+import { StyleSheet } from 'react-native';
 import { removeUndefinedKeys } from './object';
 
 const propsToDisplay = [

src/helpers/format.ts

@@ -1,5 +1,6 @@
 import type { ReactTestRendererJSON } from 'react-test-renderer';
-import prettyFormat, { NewPlugin, plugins } from 'pretty-format';
+import type { NewPlugin } from 'pretty-format';
+import prettyFormat, { plugins } from 'pretty-format';
 
 export type MapPropsFunction = (
   props: Record<string, unknown>,

src/helpers/host-component-names.ts

@@ -1,5 +1,5 @@
-import { ReactTestInstance } from 'react-test-renderer';
-import { HostTestInstance } from './component-tree';
+import type { ReactTestInstance } from 'react-test-renderer';
+import type { HostTestInstance } from './component-tree';
 
 const HOST_TEXT_NAMES = ['Text', 'RCTText'];
 const HOST_TEXT_INPUT_NAMES = ['TextInput'];

src/helpers/logger.ts

@@ -1,7 +1,7 @@
-import * as nodeConsole from 'console';
-import * as nodeUtil from 'util';
 import chalk from 'chalk';
+import * as nodeConsole from 'console';
 import redent from 'redent';
+import * as nodeUtil from 'util';
 
 export const logger = {
   debug(message: unknown, ...args: unknown[]) {

src/helpers/matchers/match-accessibility-state.ts

@@ -1,4 +1,4 @@
-import { ReactTestInstance } from 'react-test-renderer';
+import type { ReactTestInstance } from 'react-test-renderer';
 import {
   computeAriaBusy,
   computeAriaChecked,

src/helpers/matchers/match-accessibility-value.ts

@@ -1,6 +1,6 @@
-import { ReactTestInstance } from 'react-test-renderer';
+import type { ReactTestInstance } from 'react-test-renderer';
+import type { TextMatch } from '../../matches';
 import { computeAriaValue } from '../accessibility';
-import { TextMatch } from '../../matches';
 import { matchStringProp } from './match-string-prop';
 
 export interface AccessibilityValueMatcher {

src/helpers/matchers/match-label-text.ts

@@ -1,5 +1,6 @@
-import { ReactTestInstance } from 'react-test-renderer';
-import { matches, TextMatch, TextMatchOptions } from '../../matches';
+import type { ReactTestInstance } from 'react-test-renderer';
+import type { TextMatch, TextMatchOptions } from '../../matches';
+import { matches } from '../../matches';
 import { computeAriaLabel } from '../accessibility';
 
 export function matchAccessibilityLabel(

src/helpers/matchers/match-string-prop.ts

@@ -1,4 +1,4 @@
-import { TextMatch } from '../../matches';
+import type { TextMatch } from '../../matches';
 
 /**
  * Matches the given string property again string or regex matcher.

src/helpers/matchers/match-text-content.ts

@@ -1,5 +1,6 @@
 import type { ReactTestInstance } from 'react-test-renderer';
-import { matches, TextMatch, TextMatchOptions } from '../../matches';
+import type { TextMatch, TextMatchOptions } from '../../matches';
+import { matches } from '../../matches';
 import { getTextContent } from '../text-content';
 
 /**

src/helpers/pointer-events.ts

@@ -1,4 +1,4 @@
-import { ReactTestInstance } from 'react-test-renderer';
+import type { ReactTestInstance } from 'react-test-renderer';
 import { getHostParent } from './component-tree';
 
 /**

src/helpers/string-validation.ts

@@ -1,4 +1,4 @@
-import { ReactTestRendererNode } from 'react-test-renderer';
+import type { ReactTestRendererNode } from 'react-test-renderer';
 
 export const validateStringsRenderedWithinText = (
   rendererJSON: ReactTestRendererNode | Array<ReactTestRendererNode> | null,

src/helpers/text-input.ts

@@ -1,4 +1,4 @@
-import { ReactTestInstance } from 'react-test-renderer';
+import type { ReactTestInstance } from 'react-test-renderer';
 import { nativeState } from '../native-state';
 import { isHostTextInput } from './host-component-names';
 

src/helpers/timers.ts

@@ -87,9 +87,9 @@ const { clearTimeoutFn, setImmediateFn, setTimeoutFn } = runWithRealTimers(
 ) as BindTimeFunctions;
 
 export {
-  runWithRealTimers,
-  jestFakeTimersAreEnabled,
   clearTimeoutFn as clearTimeout,
+  jestFakeTimersAreEnabled,
+  runWithRealTimers,
   setImmediateFn as setImmediate,
   setTimeoutFn as setTimeout,
 };

src/index.ts

@@ -1,7 +1,7 @@
-import { cleanup } from './pure';
-import { flushMicroTasks } from './flush-micro-tasks';
-import { getIsReactActEnvironment, setReactActEnvironment } from './act';
 import './matchers/extend-expect';
+import { getIsReactActEnvironment, setReactActEnvironment } from './act';
+import { flushMicroTasks } from './flush-micro-tasks';
+import { cleanup } from './pure';
 
 if (!process?.env?.RNTL_SKIP_AUTO_CLEANUP) {
   // If we're running in a test runner that supports afterEach

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

@@ -2,12 +2,12 @@ import React from 'react';
 import {
   Button,
   Pressable,
+  Text,
   TextInput,
   TouchableHighlight,
   TouchableNativeFeedback,
   TouchableOpacity,
   TouchableWithoutFeedback,
-  Text,
   View,
 } from 'react-native';
 import { render, screen } from '../..';

src/matchers/__tests__/to-be-on-the-screen.test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { View, Text } from 'react-native';
+import { Text, View } from 'react-native';
 import { render, screen } from '../..';
 
 test('toBeOnTheScreen() example test', () => {

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { View, Modal } from 'react-native';
+import { Modal, View } from 'react-native';
 import { render, screen } from '../..';
 
 test('toBeVisible() on empty view', () => {

src/matchers/__tests__/to-have-accessible-name.test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { View, Text, TextInput, Image } from 'react-native';
+import { Image, Text, TextInput, View } from 'react-native';
 import { render, screen } from '../..';
 
 test('toHaveAccessibleName() handles view with "accessibilityLabel" prop', () => {

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { View, Text, TextInput } from 'react-native';
+import { Text, TextInput, View } from 'react-native';
 import { render, screen } from '../..';
 
 test('toHaveProp() basic case', () => {

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleSheet, View, Pressable } from 'react-native';
+import { Pressable, StyleSheet, View } from 'react-native';
 import { render, screen } from '../..';
 
 const styles = StyleSheet.create({

src/matchers/__tests__/to-have-text-content.test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { View, Text } from 'react-native';
+import { Text, View } from 'react-native';
 import { render, screen } from '../..';
 
 test('toHaveTextContent() example test', () => {