chore: setup test env

Author: dohooo

babel.config.js

@@ -1,8 +1,9 @@
 module.exports = {
   presets: ["module:metro-react-native-babel-preset"],
   plugins: [
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-proposal-private-methods",
     "react-native-reanimated/plugin",
-    "inline-dotenv",
     "@babel/plugin-syntax-dynamic-import",
   ],
 };

example/expo/package.json

@@ -52,7 +52,6 @@
     "@types/react": "~18.2.14",
     "@types/react-native-snap-carousel": "^3.8.5",
     "babel-plugin-import-glob": "^2.0.0",
-    "babel-plugin-inline-dotenv": "^1.6.0",
     "babel-plugin-module-resolver": "^4.1.0",
     "gh-pages": "^3.2.3",
     "react-error-overlay": "6.0.9",

jest-setup.js

@@ -0,0 +1 @@
+require("react-native-reanimated").setUpTests();

jest.config.js

@@ -0,0 +1,15 @@
+module.exports = {
+  preset: "react-native",
+  modulePathIgnorePatterns: [
+    "example",
+    "docs",
+    "assets",
+    ".yarn",
+    "lib",
+    ".eslintrc",
+  ],
+  setupFiles: ["./jest-setup.js"],
+  setupFilesAfterEnv: ["@testing-library/jest-native/extend-expect"],
+  testEnvironment: "node",
+  transformIgnorePatterns: [],
+};

package.json

@@ -14,14 +14,12 @@
     "scripts": {
         "gif": "node scripts/makegif.js ./scripts/gif-works-directory",
         "test": "jest run src/**/*",
-        "test:dev": "jest dev src/**/*",
+        "test:dev": "jest dev src/**/* --watch",
         "typescript": "tsc --noEmit",
         "lint": "eslint 'src/**/*.{js,ts,tsx}'",
         "lint:fix": "eslint 'src/**/*.{js,ts,tsx}' --fix",
         "dev": "watch 'yarn prepare' ./src",
         "prepare": "bob build",
-        "release": "yarn prepare && dotenv release-it --no-git.requireUpstream",
-        "preRelease": "yarn prepare && dotenv release-it --no-git.requireUpstream --preRelease=beta",
         "ios": "yarn --cwd exampleExpo ios",
         "ios:pretty": "yarn --cwd exampleExpo ios:pretty",
         "web": "yarn --cwd exampleExpo web",
@@ -50,22 +48,25 @@
         "registry": "https://registry.npmjs.org/"
     },
     "devDependencies": {
+        "@babel/plugin-proposal-class-properties": "^7.18.6",
+        "@babel/plugin-proposal-private-methods": "^7.18.6",
         "@babel/plugin-syntax-dynamic-import": "^7.8.3",
         "@changesets/changelog-github": "^0.5.0",
         "@changesets/cli": "latest",
         "@commitlint/config-conventional": "^11.0.0",
         "@dohooo/eslint-config": "^0.0.7",
         "@react-native-community/eslint-config": "^2.0.0",
-        "@release-it/conventional-changelog": "^2.0.0",
+        "@testing-library/jest-native": "^4.0.4",
+        "@testing-library/react-hooks": "^8.0.0",
+        "@testing-library/react-native": "^7.1.0",
         "@types/jest": "^29.2.5",
         "@types/react": "^18.2.15",
         "@types/react-native": "^0.66.16",
         "@types/react-native-snap-carousel": "^3.8.5",
-        "babel-plugin-inline-dotenv": "^1.6.0",
+        "@types/react-test-renderer": "^18.0.7",
         "babel-plugin-module-resolver": "^4.1.0",
         "commitlint": "^11.0.0",
         "cz-conventional-changelog": "^3.3.0",
-        "dotenv-cli": "^5.1.0",
         "eslint": "^8.26.0",
         "eslint-config-prettier": "^7.0.0",
         "eslint-plugin-prettier": "^3.1.3",
@@ -80,7 +81,7 @@
         "react-native-builder-bob": "^0.18.1",
         "react-native-gesture-handler": "~2.12.0",
         "react-native-reanimated": "~3.3.0",
-        "release-it": "^14.2.2",
+        "react-test-renderer": "^18.2.0",
         "sponsorkit": "^0.1.3",
         "typescript": "^4.0.8",
         "watch": "^1.0.2"
@@ -101,14 +102,6 @@
             "optional": true
         }
     },
-    "jest": {
-        "preset": "react-native",
-        "modulePathIgnorePatterns": [
-            "<rootDir>/exampleExpo/node_modules",
-            "<rootDir>/exampleBare/node_modules",
-            "<rootDir>/lib/"
-        ]
-    },
     "husky": {
         "hooks": {
             "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
@@ -120,37 +113,6 @@
             "@commitlint/config-conventional"
         ]
     },
-    "release-it": {
-        "git": {
-            "commitMessage": "chore: release ${version}",
-            "tagName": "v${version}"
-        },
-        "npm": {
-            "publish": true
-        },
-        "github": {
-            "release": true
-        },
-        "plugins": {
-            "@release-it/conventional-changelog": {
-                "preset": {
-                    "name": "angular",
-                    "types": [
-                        {
-                            "type": "feat",
-                            "section": "Features"
-                        },
-                        {
-                            "type": "fix",
-                            "section": "Bug Fixes"
-                        },
-                        {}
-                    ]
-                },
-                "infile": "CHANGELOG.md"
-            }
-        }
-    },
     "react-native-builder-bob": {
         "source": "src",
         "output": "lib",

src/components/rnr-demo.test.tsx

@@ -0,0 +1,43 @@
+import type { FC } from "react";
+import React from "react";
+import Animated, { useAnimatedStyle, useDerivedValue } from "react-native-reanimated";
+import renderer from "react-test-renderer";
+
+describe("useSharedValue", () => {
+  it("retains value on rerender", () => {
+    const initialValue = 0;
+    const updatedValue = 1;
+
+    interface Props {
+      key: string
+      value: number
+    }
+
+    const TestComponent: FC<Props> = (props) => {
+      const opacity = useDerivedValue(() => props.value, [props.value]);
+      const animatedStyle = useAnimatedStyle(() => ({
+        opacity: opacity.value,
+      }), [opacity]);
+
+      return <Animated.View style={animatedStyle} />;
+    };
+
+    // When rendering with initial value
+    const wrapper = renderer.create(<TestComponent key="box" value={initialValue} />);
+
+    expect(
+      typeof wrapper.root.children[0] !== "string"
+        ? wrapper.root.children[0].props.style.animatedStyle.current.value.opacity
+        : false,
+    ).toBe(initialValue);
+
+    // When rendering with updated value
+    wrapper.update(<TestComponent key="box" value={updatedValue} />);
+
+    expect(
+      typeof wrapper.root.children[0] !== "string"
+        ? wrapper.root.children[0].props.style.animatedStyle.current.value.opacity
+        : false,
+    ).toBe(initialValue);
+  });
+});