adding tests + github action

Author: dannyb

.babelrc

@@ -0,0 +1,8 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react",
+    "@babel/preset-typescript"
+  ]
+}
+  

.github/workflows/node.js.yml

@@ -0,0 +1,34 @@
+# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: Testing
+
+on:
+  push:
+    branches: [ "main" ]
+  pull_request:
+    branches: [ "main" ]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [20.11.0]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+    steps:
+      - name: Step 1 - actions/checkout@v3
+        uses: actions/checkout@v3
+    
+      - name: Step 2 - Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'npm'
+
+      - name: Step 3 - Installing deps
+        run: npm i --force
+      - name: Running test command
+        run: npm run test

jest.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+    testEnvironment: 'jsdom',
+    transform: {
+      '^.+\\.tsx?$': 'ts-jest',
+    },
+    roots: ['./src']
+  };
+  

package.json

@@ -1,17 +1,26 @@
 {
-  "version": "1.2.2",
+  "version": "1.2.3",
   "name": "next-server-action-hook",
   "description": "A React hook for handling Next.js server actions on the client side with built-in loading and error states.",
   "author": "Danny Braunstein",
   "license": "MIT",
   "scripts": {
-    "build": "tsc",
-    "prepublish": "tsc"
+    "test": "jest",
+    "build": "tsc"
   },
   "dependencies": {
-    "react": "^18.2.0"
+    "@babel/preset-typescript": "^7.23.3",
+    "@testing-library/react-hooks": "^8.0.1",
+    "@types/jest": "^29.5.11",
+    "@types/testing-library__react-hooks": "^4.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "ts-jest": "^29.1.2"
   },
   "devDependencies": {
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "react-test-renderer": "^18.2.0",
     "typescript": "^5.3.3"
   },
   "repository": {

readme.md

@@ -1,4 +1,6 @@
 # Next.js Server Action Hook
+<img src="https://github.com/dannyblv/next-server-action-hook/actions/workflows/node.js.yml/badge.svg" alt="CI status" /> <a href="https://www.npmjs.com/package/next-server-action-hook" title="View this project on NPM"><img src="https://img.shields.io/npm/v/next-server-action-hook" alt="NPM version" /></a> <img src="https://img.shields.io/npm/dw/next-server-action-hook" alt="Weekly downloads" />
+
 This package offers a React hook for managing server actions in a Next.js client-side environment. It leverages the useTransition hook for efficient loading state and error management.
 
 ## Playground
@@ -98,7 +100,7 @@ useServerAction(action: () => Promise<any>): [
 - `clearError`: A function that clears the error state.
 
 ## Updates 
-  - to v1.2.1 breaking
+  - to v1.2.0 breaking
     - `loading` is now `isLoading`.
     - `clearError` is now the 3rd item in the returned array.
 

src/index.test.ts

@@ -0,0 +1,54 @@
+import { renderHook, act } from '@testing-library/react-hooks';
+import useServerAction from './';
+
+describe('useServerAction', () => {
+  it('handles successful server action (Happy path)', async () => {
+    const mockAction = jest.fn().mockResolvedValue('mockData');
+    const { result, waitForNextUpdate } = renderHook(() => useServerAction(mockAction));
+
+    await act(async () => {
+      result.current[0]();
+      await waitForNextUpdate();
+    });
+
+    expect(result.current[1].isLoading).toBe(false);
+    expect(mockAction).toHaveBeenCalled();
+    expect(result.current[1].data).toBe('mockData');
+    expect(result.current[1].error).toBeUndefined();
+  });
+
+  it('handles server action error', async () => {
+    const mockError = new Error('Mock Error');
+    const mockAction = jest.fn().mockRejectedValue(mockError);
+    const { result, waitForNextUpdate } = renderHook(() => useServerAction(mockAction));
+
+    await act(async () => {
+      result.current[0]();
+      await waitForNextUpdate();
+    });
+
+    expect(result.current[1].isLoading).toBe(false);
+    expect(mockAction).toHaveBeenCalled();
+    expect(result.current[1].error).toBe(mockError);
+    expect(result.current[1].data).toBeUndefined();
+  });
+
+  it('clears error', async () => {
+    const mockError = new Error('Mock Error');
+    const mockAction = jest.fn().mockRejectedValue(mockError);
+    const { result, waitForNextUpdate } = renderHook(() => useServerAction(mockAction));
+
+    await act(async () => {
+      result.current[0]();
+      await waitForNextUpdate();
+    });
+
+    expect(result.current[1].error).toBe(mockError);
+
+    act(() => {
+      result.current[2]();
+    });
+
+    expect(result.current[1].error).toBeUndefined();
+  });
+});

tsconfig.json

@@ -6,7 +6,8 @@
     "moduleResolution": "node",
     "outDir": "./dist",
     "strictNullChecks": true,
-    "target": "es5"
+    "target": "es5",
+    "esModuleInterop": true
   },
-  "include": ["src/*"]
+  "include": ["src/index.ts"]
 }