feat: migrate tests to new testing library and react 19 (#1661)

Author: xobotyi

.commitlintrc.js

@@ -22,7 +22,8 @@ What does `@react-hookz/web` do right now.
 
 ### Steps to Reproduce
 
-If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://codesandbox.io or similar.
+If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem
+via https://codesandbox.io or similar.
 
 ### What is the expected behavior?
 

.github/ISSUE_TEMPLATE/bug-report.md

@@ -9,8 +9,9 @@
 ## Checklist
 
 - [ ] Have you read the [contribution guidelines](../../CONTRIBUTING.md)?
-- [ ] If you are porting a hook from `react-use`, have you checked #33 and the [migration guide](../../src/__docs__/migrating-from-react-use.story.mdx)
-      to confirm that the hook has been approved for porting?
+- [ ] If you are porting a hook from `react-use`, have you checked #33 and the
+      [migration guide](../../src/__docs__/migrating-from-react-use.story.mdx) to confirm that the hook has been
+      approved for porting?
 - [ ] Does the code have comments in hard-to-understand areas?
 - [ ] Is there an existing issue for this PR?
   - _link issue here_

.github/PULL_REQUEST_TEMPLATE/new-hook.md

@@ -15,35 +15,35 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: "Checkout"
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5
         with:
           fetch-depth: 0
       - name: 'Enable corepack'
         run: corepack enable
-      - uses: actions/setup-node@v4
+      - uses: actions/setup-node@v5
         with:
-          node-version: 22
+          node-version: 24
           cache: 'yarn'
 
       - name: "Install dependencies"
         run: yarn install --immutable
 
       - name: "Lint"
-        run: yarn lint -f @react-hookz/gha
+        run: yarn lint -f @ver0/gha
 
   build:
     name: "Build"
     runs-on: ubuntu-latest
     steps:
       - name: "Checkout"
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5
         with:
           fetch-depth: 0
       - name: 'Enable corepack'
         run: corepack enable
-      - uses: actions/setup-node@v4
+      - uses: actions/setup-node@v5
         with:
-          node-version: 22
+          node-version: 24
           cache: 'yarn'
 
       - name: "Install dependencies"
@@ -57,14 +57,14 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: "Checkout"
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5
         with:
           fetch-depth: 0
       - name: 'Enable corepack'
         run: corepack enable
-      - uses: actions/setup-node@v4
+      - uses: actions/setup-node@v5
         with:
-          node-version: 22
+          node-version: 24
           cache: 'yarn'
 
       - name: "Install dependencies"
@@ -110,22 +110,19 @@ jobs:
       new-release-published: ${{ steps.release.outputs.new-release-published }}
     steps:
       - name: "Checkout"
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5
         with:
           ref: "master"
       - name: 'Enable corepack'
         run: corepack enable
-      - uses: actions/setup-node@v4
+      - uses: actions/setup-node@v5
         with:
-          node-version: 22
+          node-version: 24
           cache: 'yarn'
 
       - name: Install dependencies
         run: yarn install --immutable
 
-      - name: "disable postinstall"
-        run: yarn pinst --disable
-
       - name: "Build"
         run: yarn build
 

.github/workflows/ci-cd.yml

@@ -0,0 +1,8 @@
+import ver0Cfg from '@ver0/eslint-config/.prettierrc.js';
+
+/**
+ * @type {import("prettier").Config}
+ */
+export default {
+	...ver0Cfg,
+};

.husky/commit-msg

@@ -1,11 +1,9 @@
 {
-  "branches": [
-    "master"
-  ],
-  "plugins": [
+	"branches": ["master"],
+	"plugins": [
 		"@semantic-release/commit-analyzer",
 		"@semantic-release/release-notes-generator",
 		"@semantic-release/npm",
 		"@semantic-release/github"
-  ]
+	]
 }

.husky/pre-commit

@@ -1,7 +1,7 @@
 # Contributing
 
-First of all, thanks for contributing to `@react-hookz`! The collective developing and
-using this library appreciates your efforts.
+First of all, thanks for contributing to `@react-hookz`! The collective developing and using this library appreciates
+your efforts.
 
 If you are contributing for the first time, we recommend reading this
 [First Contributions guide](https://github.com/firstcontributions/first-contributions) first.
@@ -18,69 +18,60 @@ If you are contributing for the first time, we recommend reading this
    - if your change fixes an issue, name the branch based on the issue number: `pr/fix-12345`
 7. Follow the directions below:
 
-> **Tip:** to keep your `master` branch pointing to the original repo's `master` (instead of your
-> fork's `master`) do this:
+> **Tip:** to keep your `master` branch pointing to the original repo's `master` (instead of your fork's `master`) do
+> this:
 >
 > ```shell
 > git remote add upstream https://github.com/react-hookz/web.git
 > git fetch upstream
 > git branch --set-upstream-to=upstream/master master
 > ```
 >
-> After running these commands you'll be able to easily pull changes from the original repository
-> with
-> `git pull`.
+> After running these commands you'll be able to easily pull changes from the original repository with `git pull`.
 
 ## Development
 
-0. Perform self-check on hook usefulness. We're not interested in hooks that has too specific
-   usecase or hooks that can be easily achieved by composition of existing hooks.
+0. Perform self-check on hook usefulness. We're not interested in hooks that has too specific usecase or hooks that can
+   be easily achieved by composition of existing hooks.
 1. Implement the hook in the `src` folder.
-   - The file with hook implementation should be named `index.ts` and placed in a subdirectory
-     named after the hook.
+   - The file with hook implementation should be named `index.ts` and placed in a subdirectory named after the hook.
    - The hook should have return types explicitly defined.
-   - The hook should have a JSDoc comment containing a description of the hook and an overview of
-     its arguments.
+   - The hook should have a JSDoc comment containing a description of the hook and an overview of its arguments.
    - The hook should be exported by name, not default-exported.
-   - If the hook has custom types in its parameters or return values, they should be exported as
-     well.
+   - If the hook has custom types in its parameters or return values, they should be exported as well.
    - Types and interfaces should not have prefixes like `I` or `T`.
-   - The hook should be developed with SSR in mind, meaning that usage of hook in SSR environment
-     should not lead to errors.
-   - If your hook reuses other @react-hookz/web hooks, import them as
-     `import { useToggle } from '../useToggle';` instead of
-     `import { useToggle } from '..';`
+   - The hook should be developed with SSR in mind, meaning that usage of hook in SSR environment should not lead to
+     errors.
+   - If your hook reuses other @react-hookz/web hooks, import them as `import { useToggle } from '../useToggle';`
+     instead of `import { useToggle } from '..';`
 2. Re-export the hook implementation and all its custom types in `src/index.ts`.
 3. Fully test your hook. The tests should include tests for both DOM and SSR environments.
-   - Hook's tests should be placed in `__tests__` subdirectory, next to the source file - `dom.ts`
-     for DOM environment, `ssr.ts` for SSR environment.  
-     For example: `src/useFirstMountState/__tests__/dom.ts`
-     and `src/useFirstMountState/__tests__/ssr.ts`.
-   - Ideally, your hook should have 100% test coverage. If that is impossible, you should leave a
-     comment in the code describing why.
-   - Each hook should have at least `'should be defined'` and `'should render'` tests in `SSR`
-     environment.
+   - Hook's tests should be placed in `__tests__` subdirectory, next to the source file - `dom.ts` for DOM environment,
+     `ssr.ts` for SSR environment.  
+     For example: `src/useFirstMountState/__tests__/dom.ts` and `src/useFirstMountState/__tests__/ssr.ts`.
+   - Ideally, your hook should have 100% test coverage. If that is impossible, you should leave a comment in the code
+     describing why.
+   - Each hook should have at least `'should be defined'` and `'should render'` tests in `SSR` environment.
    - All utility functions should also be tested.
 4. Write docs for your hook.
    - Docs should be placed in `__docs__` sub-folder, near the source file.  
      For example: `src/useFirstMountState/__docs__/story.mdx`.
    - Docs are built with Storybook. You can run `yarn storybook:watch` to preview your work.
-   - Write a short example demonstrating your hook in `example.stories.tsx` within the `__docs__`
-     folder. (If the filename misses the `.stories.tsx` part, Storybook won't find your example.)  
+   - Write a short example demonstrating your hook in `example.stories.tsx` within the `__docs__` folder. (If the
+     filename misses the `.stories.tsx` part, Storybook won't find your example.)  
      For example: `src/useFirstMountState/__docs__/example.stories.tsx`.
    - Docs are written in MDX format.  
      [Read more about storybook docs](https://storybook.js.org/docs/react/writing-docs/introduction).
 5. Add a summary of the hook and a link to the docs to `README.md`.
-6. After all the above steps are done, run `yarn lint:fix` to ensure that everything is styled by
-   our standards and there are no linting issues.
+6. After all the above steps are done, run `yarn lint:fix` to ensure that everything is styled by our standards and
+   there are no linting issues.
 7. `yarn new-hook myAwesomeHook` will help you to create a proper file structure for the new hook.
 
 ### Notes on porting a hook from `react-use`
 
-- Check from #33 and the [migration guide](src/__docs__/migrating-from-react-use.story.mdx) that the
-  hook has been approved for porting. If there is no previous discussion on the hook in #33, leave a
-  comment there asking if you could port the hook. In your comment, provide a valid use-case for the
-  hook.
+- Check from #33 and the [migration guide](src/__docs__/migrating-from-react-use.story.mdx) that the hook has been
+  approved for porting. If there is no previous discussion on the hook in #33, leave a comment there asking if you could
+  port the hook. In your comment, provide a valid use-case for the hook.
 - Don't just copy-paste the hook. Think through the code:
   - Is there sufficient tests?
   - Could the hook be implemented by reusing existing hooks in `@react-hookz/web`?
@@ -92,9 +83,8 @@ If you are contributing for the first time, we recommend reading this
 ### Commit message
 
 This repo uses [semantic-release](https://github.com/semantic-release/semantic-release) and
-[conventional commit messages](https://conventionalcommits.org) so prefix your commits with `fix:`,
-`feat:`, etc., so that your changes appear in the
-[release notes](https://github.com/react-hookz/web/blob/master/CHANGELOG.md).
+[conventional commit messages](https://conventionalcommits.org) so prefix your commits with `fix:`, `feat:`, etc., so
+that your changes appear in the [release notes](https://github.com/react-hookz/web/blob/master/CHANGELOG.md).
 
 Also, there is a script that helps you to properly format commit messages:
 
@@ -103,11 +93,11 @@ git add .
 yarn commit
 ```
 
-The script guides you through several prompts that help you with writing a good commit message,
-including many non-obvious and easy-to-forget parts.
+The script guides you through several prompts that help you with writing a good commit message, including many
+non-obvious and easy-to-forget parts.
 
 ### Git hooks
 
-This project includes Git hooks that are automatically enabled when you install the dependencies.
-These hooks automatically test and validate your code and commit messages before each commit. In
-most cases disabling these hooks is not recommended.
+This project includes Git hooks that are automatically enabled when you install the dependencies. These hooks
+automatically test and validate your code and commit messages before each commit. In most cases disabling these hooks is
+not recommended.