add unit test with test-library and jest/native

Author: MatthysDev

hackathon/spacecraft/jest.setup.js

@@ -0,0 +1,17 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+/* eslint-disable @typescript-eslint/no-var-requires */
+/* eslint-disable no-undef */
+import "react-native-gesture-handler/jestSetup";
+
+jest.mock("react-native-reanimated", () => {
+ const Reanimated = require("react-native-reanimated/mock");
+
+ // The mock for `call` immediately calls the callback which is incorrect
+ // So we override it with a no-op
+ Reanimated.default.call = () => {};
+
+ return Reanimated;
+});
+
+// Silence the warning: Animated: `useNativeDriver` is not supported because the native animated module is missing
+jest.mock("react-native/Libraries/Animated/NativeAnimatedHelper");

hackathon/spacecraft/package.json

@@ -6,16 +6,30 @@
  "ios": "expo start --ios",
  "web": "expo start --web",
  "eject": "expo eject",
- "lint": "eslint --ignore-path .gitignore --ext .js,.ts,.tsx ."
+ "lint": "eslint --ignore-path .gitignore --ext .js,.ts,.tsx .",
+ "test": "jest",
+ "test:unit:watch": "jest --watch"
+ },
+ "jest": {
+ "preset": "jest-expo",
+ "setupFiles": [
+ "<rootDir>/jest.setup.js"
+ ]
  },
  "dependencies": {
  "@expo/vector-icons": "^12.0.0",
  "@react-native-community/masked-view": "0.1.10",
  "@react-navigation/material-bottom-tabs": "^6.0.9",
  "@react-navigation/native": "^6.0.6",
  "@react-navigation/stack": "^6.0.11",
+ "@testing-library/jest-native": "^4.0.4",
+ "@types/jest": "^27.4.0",
+ "babel-core": "^7.0.0-bridge.0",
+ "babel-jest": "^27.4.6",
  "expo": "^44.0.0",
  "expo-status-bar": "~1.2.0",
+ "jest": "26",
+ "jest-expo": "^44.0.1",
  "react": "17.0.1",
  "react-dom": "17.0.1",
  "react-native": "0.64.3",
@@ -30,6 +44,8 @@
  },
  "devDependencies": {
  "@babel/core": "^7.12.9",
+ "@babel/preset-typescript": "^7.16.7",
+ "@testing-library/react-native": "^9.0.0",
  "@types/react": "~17.0.21",
  "@types/react-dom": "~17.0.9",
  "@types/react-native": "~0.64.12",

hackathon/spacecraft/src/navigation/BottomTabNavigator.tsx

@@ -5,7 +5,6 @@ import { FontAwesome5 } from "@expo/vector-icons";
 import { createStackNavigator } from "@react-navigation/stack";
 
 import StarshipFeedScreen from "../screens/StarshipFeedScreen";
-import StarshipFeedExampleScreen from "../screens/exercice/FeedScreen";
 import StarshipDetailsScreen from "../screens/StarshipDetailsScreen";
 
 import { AppRoutes } from "./AppRoutes";

hackathon/spacecraft/src/utils/FromInput.test.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { fireEvent, render } from "@testing-library/react-native";
+
+import { FormInput } from "~/components/FromInput";
+
+describe("StarshipCard", () => {
+ const mock = jest.fn();
+ it("renders correctly", () => {
+ const { getAllByText } = render(
+ <FormInput label="your-car" value="tesla" onChangeText={mock} />
+ );
+ getAllByText("your-car");
+ fireEvent.changeText(getAllByText("your-car")[0], "tesla");
+ expect(mock).toHaveBeenCalled();
+ });
+});

hackathon/spacecraft/src/utils/StarshipCard.test.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { render } from "@testing-library/react-native";
+import { NavigationContainer } from "@react-navigation/native";
+
+import StarshipCard from "../components/StarshipCard";
+
+const shipFixture = {
+ name: "Millennium Falcon",
+ model: "YT-1300 light freighter",
+};
+
+describe("StarshipCard", () => {
+ it("renders correctly", () => {
+ const { getByText } = render(
+ <NavigationContainer>
+ <StarshipCard ship={shipFixture} />
+ </NavigationContainer>
+ );
+ getByText("Millennium Falcon");
+ });
+});

hackathon/spacecraft/src/utils/hello.test.ts

@@ -0,0 +1,3 @@
+it("works", () => {
+ expect(1).toBe(1);
+});