fix: resolve npm conflict

Author: JeremyDolle

template/eslint.config.mjs

@@ -1,9 +1,11 @@
 import eslintConfigPrettier from 'eslint-config-prettier';
 import importPlugin from 'eslint-plugin-import';
+import jest from 'eslint-plugin-jest';
 import perfectionist from 'eslint-plugin-perfectionist';
 import react from 'eslint-plugin-react';
 import reactHooks from 'eslint-plugin-react-hooks';
 import reactRefresh from 'eslint-plugin-react-refresh';
+import testingLibrary from 'eslint-plugin-testing-library';
 import unicorn from 'eslint-plugin-unicorn';
 
 const ERROR = 2;
@@ -24,6 +26,7 @@ export default tseslint.config(
   react.configs.flat.all,
   react.configs.flat['jsx-runtime'],
   reactRefresh.configs.recommended,
+  testingLibrary.configs['flat/react'],
   eslintConfigPrettier, // last
   {
     languageOptions: {
@@ -55,6 +58,7 @@ export default tseslint.config(
       'react-hooks': reactHooks,
     },
     rules: {
+      ...reactHooks.configs.recommended.rules,
       '@typescript-eslint/consistent-type-definitions': [ERROR, 'type'],
       '@typescript-eslint/dot-notation': [ERROR, { allowKeywords: true }],
       '@typescript-eslint/no-empty-function': OFF,
@@ -142,6 +146,13 @@ export default tseslint.config(
       'unicorn/prefer-module': OFF,
     },
   },
+  {
+    files: ['**/*.spec.{js,ts,jsx,tsx}', '**/*.test.{js,ts,jsx,tsx}'],
+    ...jest.configs['flat/recommended'],
+    rules: {
+      ...jest.configs['flat/recommended'].rules,
+    },
+  },
   {
     ignores: ['plugins/**'],
   },

template/jest.setup.js

@@ -1,2 +1,2 @@
-import './__mocks__/libs';
-import './__mocks__/getAssetsContext';
+import './tests/__mocks__/libs';
+import './tests/__mocks__/getAssetsContext';

template/package.json

@@ -68,7 +68,6 @@
     "eslint-plugin-react-refresh": "^0.4.19",
     "eslint-plugin-testing-library": "^7.1.1",
     "eslint-plugin-unicorn": "^58.0.0",
-    "eslint-plugin-unused-imports": "^4.1.4",
     "jest": "^29.7.0",
     "prettier": "^3.5.3",
     "react-native-svg-transformer": "^1.5.0",

template/src/components/atoms/Skeleton/Skeleton.test.tsx

@@ -1,5 +1,5 @@
-import TestAppWrapper from '@/../__mocks__/TestAppWrapper';
-import { render } from '@testing-library/react-native';
+import TestAppWrapper from '@/../tests/TestAppWrapper';
+import { render, screen } from '@testing-library/react-native';
 import { Text } from 'react-native';
 
 import SkeletonLoader from './Skeleton';
@@ -12,32 +12,31 @@ describe('SkeletonLoader', () => {
   });
 
   it('renders children when not loading', () => {
-    const { getByText } = render(
+    render(
       <SkeletonLoader loading={false}>
         <Text>Loaded Content</Text>
       </SkeletonLoader>,
       {
         wrapper: TestAppWrapper,
       },
     );
-    expect(getByText('Loaded Content')).toBeTruthy();
+    expect(screen.getByText('Loaded Content')).toBeTruthy();
   });
 
   it('renders skeleton when loading', () => {
-    const { getByTestId } = render(<SkeletonLoader loading />, {
+    render(<SkeletonLoader loading />, {
       wrapper: TestAppWrapper,
     });
-    const skeleton = getByTestId('skeleton-loader');
+    const skeleton = screen.getByTestId('skeleton-loader');
     jest.advanceTimersByTime(WAIT);
     expect(skeleton).toBeTruthy();
   });
 
   it('applies correct height and width', () => {
-    const { getByTestId } = render(
-      <SkeletonLoader height={50} loading width={100} />,
-      { wrapper: TestAppWrapper },
-    );
-    const skeleton = getByTestId('skeleton-loader');
+    render(<SkeletonLoader height={50} loading width={100} />, {
+      wrapper: TestAppWrapper,
+    });
+    const skeleton = screen.getByTestId('skeleton-loader');
 
     const animatedStyle: {
       value: { opacity: number };

template/src/reactotron.config.ts

@@ -2,25 +2,13 @@ import type { ReactotronReactNative } from 'reactotron-react-native';
 
 import Reactotron from 'reactotron-react-native';
 import mmkvPlugin from 'reactotron-react-native-mmkv';
-import {
-  QueryClientManager,
-  reactotronReactQuery,
-} from 'reactotron-react-query';
 
 import config from '../app.json';
-import { queryClient, storage } from './App';
-
-const queryClientManager = new QueryClientManager({
-  queryClient,
-});
+import { storage } from './App';
 
 Reactotron.configure({
   name: config.name,
-  onDisconnect: () => {
-    queryClientManager.unsubscribe();
-  },
 })
   .useReactNative()
   .use(mmkvPlugin<ReactotronReactNative>({ storage }))
-  .use(reactotronReactQuery(queryClientManager))
   .connect();

template/src/theme/ThemeProvider/ThemeProvider.test.tsx

@@ -1,4 +1,4 @@
-import { fireEvent, render } from '@testing-library/react-native';
+import { fireEvent, render, screen } from '@testing-library/react-native';
 import { Button, Text, View } from 'react-native';
 import { MMKV } from 'react-native-mmkv';
 
@@ -28,45 +28,40 @@ describe('ThemeProvider', () => {
   });
 
   it('initializes with the default theme when no theme is defined in storage', () => {
-    const { getByTestId } = render(
+    render(
       <ThemeProvider storage={storage}>
         <TestChildComponent />
       </ThemeProvider>,
     );
-    const themeContext = getByTestId('theme-variant');
-
     // Assert that the theme context is initialized with 'default'
-    expect(themeContext.children[0]).toBe('default');
+    expect(screen.getByText('default')).toBeTruthy();
   });
 
   it('loads the theme from storage if defined', () => {
     storage.set('theme', 'dark');
 
-    const { getByTestId } = render(
+    render(
       <ThemeProvider storage={storage}>
         <TestChildComponent />
       </ThemeProvider>,
     );
-    const themeContext = getByTestId('theme-variant');
 
     // Assert that the theme context is initialized with 'dark'
-    expect(themeContext.children[0]).toBe('dark');
+    expect(screen.getByText('dark')).toBeTruthy();
   });
 
   it('changes the theme when calling changeTheme', () => {
-    const { getByTestId } = render(
+    render(
       <ThemeProvider storage={storage}>
         <TestChildComponent />
       </ThemeProvider>,
     );
-    const themeContext = getByTestId('theme-variant');
-
-    expect(themeContext.children[0]).toBe('default');
 
-    // Change the theme to 'light'
-    fireEvent.press(getByTestId('change-btn'));
+    // Assert that the theme context is initialized with 'default'
+    expect(screen.getByText('default')).toBeTruthy();
+    fireEvent.press(screen.getByTestId('change-btn'));
 
     // Assert that the theme has changed to 'light'
-    expect(themeContext.children[0]).toBe('dark');
+    expect(screen.getByText('dark')).toBeTruthy();
   });
 });

template/__mocks__/TestAppWrapper.tsx renamed to template/tests/TestAppWrapper.tsx

@@ -8,15 +8,15 @@
     "noUnusedLocals": true
   },
   "include": [
-    "__mocks__/**/*",
+    "tests/**/*",
     "./src/**/*",
     "index.d.ts",
     "*.mjs",
     ".*.mjs",
     "*.js",
     ".*.js",
     "*.ts",
-     ".prettierrc.mjs"
-],
+    ".prettierrc.mjs"
+  ],
   "exclude": ["node_modules", "_", "android", "ios"]
 }