update testing

Author: JeremyDolle

template/__mocks__/libs/index.ts

@@ -1,4 +1,4 @@
-import '@testing-library/jest-native/extend-expect';
+import '@testing-library/react-native/extend-expect';
 // LOCAL
 import './react-native-reanimated';
 import './react-native-safe-area-context';

template/eslint.config.mjs

@@ -5,6 +5,7 @@ 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 testingLibrary from 'eslint-plugin-testing-library';
 import unicorn from 'eslint-plugin-unicorn';
 import unusedImports from 'eslint-plugin-unused-imports';
 import tsEslint from 'typescript-eslint';
@@ -15,7 +16,7 @@ const __dirname = dirname(__filename);
 export default [
   ...tsEslint.configs.strict,
   {
-    files: ['**/*.js', '**/*.jsx', '**/*.ts', '**/*.tsx'],
+    files: ['**/*.mjs', '**/*.js', '**/*.jsx', '**/*.ts', '**/*.tsx'],
     plugins: {
       import: importPlugin,
       jest,
@@ -153,6 +154,9 @@ export default [
   },
   {
     files: ['./**/*.test.{ts,tsx}'],
+    plugins: {
+      'testing-library': testingLibrary,
+    },
     rules: {
       '@typescript-eslint/no-unsafe-assignment': 0,
       '@typescript-eslint/no-unsafe-call': 0,

template/jest.config.js

@@ -5,11 +5,9 @@ module.exports = {
   ],
   coverageReporters: ['html', 'text', 'text-summary', 'cobertura'],
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'],
-  preset: '@testing-library/react-native',
-  setupFilesAfterEnv: [
-    './node_modules/react-native-gesture-handler/jestSetup.js',
-    '<rootDir>/jest.setup.js',
-  ],
+  preset: 'react-native',
+  setupFiles: ['./node_modules/react-native-gesture-handler/jestSetup.js'],
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
   testMatch: ['**/*.test.ts?(x)', '**/*.test.js?(x)'],
   transformIgnorePatterns: [
     'node_modules/(?!(jest-)?react-native|@react-native|@react-native-community|@react-navigation|ky)',

template/package.json

@@ -48,7 +48,6 @@
     "@react-native/eslint-config": "0.76.1",
     "@react-native/metro-config": "0.76.1",
     "@react-native/typescript-config": "0.76.1",
-    "@testing-library/jest-native": "^5.4.2",
     "@testing-library/react-native": "^12.1.2",
     "@types/jest": "^29.4.0",
     "@types/node": "^18.14.1",
@@ -66,6 +65,7 @@
     "eslint-plugin-perfectionist": "^3.9.1",
     "eslint-plugin-react": "^7.37.1",
     "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-testing-library": "^6.4.0",
     "eslint-plugin-unicorn": "^56.0.0",
     "eslint-plugin-unused-imports": "^4.1.4",
     "jest": "^29.7.0",

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

@@ -37,13 +37,23 @@ describe('SkeletonLoader', () => {
       { wrapper: TestAppWrapper },
     );
     const skeleton = getByTestId('skeleton-loader');
-    expect(skeleton).toHaveAnimatedStyle({
+    // TODO: use toHaveAnimatedStyle for better API but for now there is an issue with the library
+    // expect(skeleton).toHaveAnimatedStyle({
+    //   opacity: 0.2,
+    // });
+
+    expect(skeleton.props.jestAnimatedStyle.value).toEqual({
       opacity: 0.2,
     });
+
     jest.advanceTimersByTime(800);
-    expect(skeleton).toHaveAnimatedStyle({
+    expect(skeleton.props.jestAnimatedStyle.value).toEqual({
       opacity: 1,
     });
+    // TODO: use toHaveAnimatedStyle for better API but for now there is an issue with the library
+    // expect(skeleton).toHaveAnimatedStyle({
+    //   opacity: 1,
+    // });
     expect(skeleton).toHaveStyle({
       backgroundColor: '#A1A1A1',
       borderRadius: 4,

template/yarn.lock

@@ -2025,17 +2025,6 @@
   dependencies:
     "@tanstack/query-core" "5.59.20"
 
-"@testing-library/jest-native@^5.4.2":
-  version "5.4.3"
-  resolved "https://registry.yarnpkg.com/@testing-library/jest-native/-/jest-native-5.4.3.tgz#9334c68eaf45db9eb20d0876728cc5d7fc2c3ea2"
-  integrity sha512-/sSDGaOuE+PJ1Z9Kp4u7PQScSVVXGud59I/qsBFFJvIbcn4P6yYw6cBnBmbPF+X9aRIsTJRDl6gzw5ZkJNm66w==
-  dependencies:
-    chalk "^4.1.2"
-    jest-diff "^29.0.1"
-    jest-matcher-utils "^29.0.1"
-    pretty-format "^29.0.3"
-    redent "^3.0.0"
-
 "@testing-library/react-native@^12.1.2":
   version "12.8.1"
   resolved "https://registry.yarnpkg.com/@testing-library/react-native/-/react-native-12.8.1.tgz#833c73a825aa87b9127717a44d4aeee44b59a963"
@@ -2384,7 +2373,7 @@
     "@typescript-eslint/types" "8.14.0"
     "@typescript-eslint/typescript-estree" "8.14.0"
 
-"@typescript-eslint/utils@^5.10.0":
+"@typescript-eslint/utils@^5.10.0", "@typescript-eslint/utils@^5.62.0":
   version "5.62.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.62.0.tgz#141e809c71636e4a75daa39faed2fb5f4b10df86"
   integrity sha512-n8oxjeb5aIbPFEtmQxQYOLI0i9n5ySBEY/ZEHHZqKQSFnxio1rv6dthascc9dLuwrL0RC5mPCxB7vnAVGAYWAQ==
@@ -3800,6 +3789,13 @@ eslint-plugin-react@^7.30.1, eslint-plugin-react@^7.37.1:
     string.prototype.matchall "^4.0.11"
     string.prototype.repeat "^1.0.0"
 
+eslint-plugin-testing-library@^6.4.0:
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-testing-library/-/eslint-plugin-testing-library-6.4.0.tgz#1ba8a7422e3e31cc315a73ff17c34908f56f9838"
+  integrity sha512-yeWF+YgCgvNyPNI9UKnG0FjeE2sk93N/3lsKqcmR8dSfeXJwFT5irnWo7NjLf152HkRzfoFjh3LsBUrhvFz4eA==
+  dependencies:
+    "@typescript-eslint/utils" "^5.62.0"
+
 eslint-plugin-unicorn@^56.0.0:
   version "56.0.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-unicorn/-/eslint-plugin-unicorn-56.0.0.tgz#9fd3ebe6f478571734541fa745026b743175b59e"
@@ -4919,7 +4915,7 @@ jest-config@^29.7.0:
     slash "^3.0.0"
     strip-json-comments "^3.1.1"
 
-jest-diff@^29.0.1, jest-diff@^29.7.0:
+jest-diff@^29.7.0:
   version "29.7.0"
   resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-29.7.0.tgz#017934a66ebb7ecf6f205e84699be10afd70458a"
   integrity sha512-LMIgiIrhigmPrs03JHpxUh2yISK3vLFPkAodPeo0+BuF7wA2FoQbkEg1u8gBYBThncu7e1oEDUfIXVuTqLRUjw==
@@ -4991,7 +4987,7 @@ jest-leak-detector@^29.7.0:
     jest-get-type "^29.6.3"
     pretty-format "^29.7.0"
 
-jest-matcher-utils@^29.0.1, jest-matcher-utils@^29.7.0:
+jest-matcher-utils@^29.7.0:
   version "29.7.0"
   resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-29.7.0.tgz#ae8fec79ff249fd592ce80e3ee474e83a6c44f12"
   integrity sha512-sBkD+Xi9DtcChsI3L3u0+N0opgPYnCRPtGcQYrgXmR+hmt/fYfWAL0xRXYU8eWOdfuLgBe0YCW3AFtnRLagq/g==
@@ -6268,7 +6264,7 @@ pretty-format@^26.6.2:
     ansi-styles "^4.0.0"
     react-is "^17.0.1"
 
-pretty-format@^29.0.0, pretty-format@^29.0.3, pretty-format@^29.7.0:
+pretty-format@^29.0.0, pretty-format@^29.7.0:
   version "29.7.0"
   resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-29.7.0.tgz#ca42c758310f365bfa71a0bda0a807160b776812"
   integrity sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==