chore(test): migrate from Jest to node:test

Author: avivkeller

Diff for: .github/dependabot.yml

@@ -39,9 +39,6 @@ updates:
         patterns:
           - '@testing-library/*'
           - '@types/testing-library*'
-          - '@types/jest'
-          - 'jest'
-          - 'jest-*'
       next-js:
         patterns:
           - 'next'

Diff for: .github/workflows/lint-and-tests.yml

@@ -189,7 +189,7 @@ jobs:
         # that changes to dependencies or translations don't break the Unit Tests
         # We want to enforce that the actual `turbo@latest` package is used instead of a possible hijack from the user
         # the `${{ needs.base.outputs.turbo_args }}` is a string substitution happening from the base job
-        run: npx --package=turbo@latest -- turbo test:unit ${{ needs.base.outputs.turbo_args }} -- --ci --coverage
+        run: npx --package=turbo@latest -- turbo test:ci ${{ needs.base.outputs.turbo_args }}
 
       - name: Start Visual Regression Tests (Chromatic)
         # This assigns the Environment Deployment for Storybook
@@ -210,19 +210,10 @@ jobs:
           exitOnceUploaded: true
           onlyChanged: true
 
-      - name: Jest Coverage Comment
-        # We don't need to post the Jest Coverage comment on Crowdin PRs and Dependabot PRs
-        # as in general they introduce no changes to the Unit Tests and the Codebase
-        # We reuse the checks from the Chromatic Deploy step as they're the same conditions
-        if: steps.chromatic-deploy.outcome == 'success'
-        # This comments the current Jest Coverage Report containing JUnit XML reports
-        # and a Code Coverage Summary
-        uses: MishaKav/jest-coverage-comment@d74238813c33e6ea20530ff91b5ea37953d11c91 # v1.0.27
+      - name: Report code coverage
+        uses: zgosalvez/github-actions-report-lcov@df68834145a4a567247d6a3ea8565c4c39d1fd17 # v4.1.23
         with:
-          title: 'Unit Test Coverage Report'
-          multiple-junitxml-files: |
-            @node-core/ui-components, ./packages/ui-components/junit.xml
-            @nodejs/website, ./apps/site/junit.xml
-          multiple-files: |
-            @node-core/ui-components, ./packages/ui-components/coverage/coverage-summary.json
-            @nodejs/website, ./apps/site/coverage/coverage-summary.json
+          coverage-files: '{apps/site,packages/ui-components}/lcov.info'
+          artifact-name: code-coverage-report
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          update-comment: true

Diff for: .gitignore

@@ -8,10 +8,9 @@ npm-debug.log
 .next
 build
 
-# Jest
-coverage
-.swc
+# Test Runner
 junit.xml
+lcov.info
 
 # Storybook
 storybook-static

Diff for: .prettierignore

@@ -10,10 +10,9 @@ build
 # Next.js Generated Files
 public/static/documents
 
-# Jest
-coverage
-.swc
+# Test Runner
 junit.xml
+lcov.info
 
 # Storybook
 storybook-static

Diff for: COLLABORATOR_GUIDE.md

@@ -419,7 +419,7 @@ You can add a PACKAGE_MANAGER the same way as adding an INSTALLATION_METHOD (fro
 ## Unit Tests and Storybooks
 
 Each new feature or bug fix should be accompanied by a unit test (when deemed valuable).
-We use [Jest][] as our test runner and [React Testing Library][] for our React unit tests.
+We use [`node:test`][] as our test runner and [React Testing Library][] for our React unit tests.
 
 We also use [Storybook][] to document our components.
 Components within `packages/ui-components` should have a storybook story that documents the component's usage.
@@ -435,8 +435,6 @@ Unit Tests are fundamental to ensure that code changes do not disrupt the functi
 - Unit Tests should ensure that a given change's functionality is working as expected.
 - When creating unit tests for React components, we recommend that the tests cover all the possible states of the component.
 - We also recommend mocking external dependencies, if unsure about how to mock a particular dependency, raise the question on your Pull Request.
-  - We recommend using [Jest's Mock Functions](https://jestjs.io/docs/en/mock-functions) for mocking dependencies.
-  - We recommend using [Jest's Mock Modules](https://jestjs.io/docs/en/manual-mocks) for mocking dependencies unavailable on the Node.js runtime.
   - Common Providers and Contexts from the lifecycle of our App, such as [`next-intl`][] should not be mocked but given an empty or fake context whenever possible.
 - We recommend reading previous unit tests from the codebase for inspiration and code guidelines.
 
@@ -644,7 +642,7 @@ A lot of the current structure is due to retro-compatibility, keeping a simple a
 
 If you're unfamiliar or curious about something, we recommend opening a Discussion on this GitHub Repository.
 
-[Jest]: https://jestjs.io/
+[`node:test`]: https://nodejs.org/api/test.html
 [React Testing Library]: https://testing-library.com/docs/react-testing-library/intro/
 [Storybook]: https://storybook.js.org/
 [`next-intl`]: https://next-intl-docs.vercel.app

Diff for: CONTRIBUTING.md

@@ -160,7 +160,7 @@ This repository contains several scripts and commands for performing numerous ta
 - `npx turbo storybook` starts Storybook's local server
 - `npx turbo storybook:build` builds Storybook as a static web application for publishing
 - `npm run test` runs all tests locally
-  - `npx turbo test:unit` runs jest (unit-tests) locally
+  - `npx turbo test:unit` runs unit-tests locally
 
 </details>
 

Diff for: DEPENDENCY_PINNING.md

@@ -12,14 +12,14 @@ The following recommendations are in order when adding a new dependency:
   - Some non-code dependencies are required for the bootstrap of the repository. They are either used on basic build scripts or Git Hooks. Examples include `husky`, `lint-staged` and others.
 - A dependency should be a `devDependencies` if it is not invoked anywhere within the codebase.
   - This applies to runtimes, tooling, utility/dev-only commands, type packages and others
-- Sometimes, a dependency should be a `devDependency` even if invoked within the codebase, but only used within a development environment or during a test runner. Examples include `jest`, `storybook` and others.
+- Sometimes, a dependency should be a `devDependency` even if invoked within the codebase, but only used within a development environment or during a test runner. Examples include `storybook` and others.
 - A dependency should be a `peerDependencies` if it is a runtime dependency of the Website, but the Website itself does not install it. Examples include `react`, `react-dom` and others.
 
 ### When pinning dependencies
 
 When adding dependencies, you should consider if that dependency should be saved as an exact dependency (`--save-exact`) or use either a `^` or `~` version range operator. The following guidelines are in order:
 
-- A dependency, in general, should be pinned to its exact dependency if it's either a tooling or a CLI dependency. Examples include `husky`, `prettier`, `jest` and others.
+- A dependency, in general, should be pinned to its exact dependency if it's either a tooling or a CLI dependency. Examples include `husky`, `prettier`, and others.
 - A dependency should generally use `~` if we're interested in patch updates (such as hot-fixes and bug-fixes) and the package is part of the Development or Testing Environment. (Such as `storybook`, for example)
 - A dependency should generally use `^` if they're part of the Website Application itself, such as `react`, `next-intl` etc. This is done because we intentionally want to get these dependencies' latest features and bug-fixes.
   - If we're not interested in getting the latest features and bug fixes, we should consider using `~` instead.

Diff for: apps/site/.stylelintignore

@@ -7,8 +7,9 @@ build
 # Public Folder
 public
 
-# Jest
-coverage
+# Test Runner
+junit.xml
+lcov.info
 
 # Old Styles
 styles/old

Diff for: apps/site/components/Blog/BlogHeader/__tests__/index.test.mjs renamed to apps/site/components/Blog/BlogHeader/__tests__/index.test.jsx

@@ -1,3 +1,6 @@
+import { describe, it } from 'node:test';
+import assert from 'node:assert';
+
 import { render, screen } from '@testing-library/react';
 
 import BlogHeader from '@/components/Blog/BlogHeader';
@@ -6,24 +9,24 @@ describe('BlogHeader', () => {
   it('should have correct href when category is all', () => {
     render(<BlogHeader category="all" />);
     const link = screen.getByRole('link');
-    expect(link).toHaveAttribute('href', '/feed/blog.xml');
+    assert.strictEqual(link.getAttribute('href'), '/feed/blog.xml');
   });
 
   it('should have correct href when category is release', () => {
     render(<BlogHeader category="release" />);
     const link = screen.getByRole('link');
-    expect(link).toHaveAttribute('href', '/feed/releases.xml');
+    assert.strictEqual(link.getAttribute('href'), '/feed/releases.xml');
   });
 
   it('should have correct href when category is vulnerability', () => {
     render(<BlogHeader category="vulnerability" />);
     const link = screen.getByRole('link');
-    expect(link).toHaveAttribute('href', '/feed/vulnerability.xml');
+    assert.strictEqual(link.getAttribute('href'), '/feed/vulnerability.xml');
   });
 
   it('should have correct href when category is random', () => {
     render(<BlogHeader category="random" />);
     const link = screen.getByRole('link');
-    expect(link).toHaveAttribute('href', '/feed/blog.xml');
+    assert.strictEqual(link.getAttribute('href'), '/feed/blog.xml');
   });
 });

Diff for: apps/site/components/Blog/BlogPostCard/__tests__/index.test.mjs renamed to apps/site/components/Blog/BlogPostCard/__tests__/index.test.jsx

@@ -1,4 +1,7 @@
 import { render, screen } from '@testing-library/react';
+import { describe, it } from 'node:test';
+import assert from 'node:assert';
+import { isVisible } from '../../../../../../tests/utilities.mjs';
 
 import BlogPostCard from '@/components/Blog/BlogPostCard';
 
@@ -29,40 +32,39 @@ describe('BlogPostCard', () => {
     it('Wraps the entire card within an article', () => {
       renderBlogPostCard({});
 
-      expect(screen.getByRole('article')).toBeVisible();
+      assert.ok(isVisible(screen.getByRole('article')));
     });
 
     it('Renders the title prop correctly', () => {
       const { title } = renderBlogPostCard({});
 
-      expect(screen.getAllByText(title).length).toBe(2);
+      assert.strictEqual(screen.getAllByText(title).length, 2);
 
       // title from preview should be ignored as the one from Links
       // and blog card/post are what matter
-      expect(screen.getAllByText(title)[0]).toHaveAttribute(
-        'aria-hidden',
+      assert.strictEqual(
+        screen.getAllByText(title)[0].getAttribute('aria-hidden'),
         'true'
       );
     });
 
     it('Renders the description prop correctly', () => {
       const { description } = renderBlogPostCard({});
 
-      expect(screen.getByText(description)).toBeVisible();
+      assert.ok(isVisible(screen.getByText(description)));
     });
 
-    it.each([
+    [
       { label: 'layouts.blog.categories.vulnerability', type: 'vulnerability' },
       { label: 'layouts.blog.categories.announcements', type: 'announcements' },
       { label: 'layouts.blog.categories.release', type: 'release' },
-    ])(
-      'Renders "%label" text when passing it the type "%type"',
-      ({ label, type }) => {
+    ].forEach(({ label, type }) => {
+      it(`Renders "${label} text when passing it the type "${type}`, () => {
         renderBlogPostCard({ type });
 
-        expect(screen.getByText(label)).toBeVisible();
-      }
-    );
+        assert.ok(isVisible(screen.getByText(label)));
+      });
+    });
 
     it('Renders all passed authors fullName(s), comma-separated', () => {
       const authors = ['Jane Doe', 'John Doe'];
@@ -77,7 +79,7 @@ describe('BlogPostCard', () => {
         return `${prev}, ${curr}`;
       }, '');
 
-      expect(screen.getByText(fullNames)).toBeVisible();
+      assert.ok(isVisible(screen.getByText(fullNames)));
     });
 
     it('Renders all passed authors fullName(s), comma-separated', () => {
@@ -93,7 +95,7 @@ describe('BlogPostCard', () => {
         return `${prev}, ${curr}`;
       }, '');
 
-      expect(screen.getByText(fullNames)).toBeVisible();
+      assert.ok(isVisible(screen.getByText(fullNames)));
     });
 
     it('Renders date prop in short format', () => {
@@ -107,7 +109,7 @@ describe('BlogPostCard', () => {
         year: 'numeric',
       });
 
-      expect(screen.getByText(dateTimeFormat.format(date))).toBeVisible();
+      assert.ok(isVisible(screen.getByText(dateTimeFormat.format(date))));
     });
   });
 });

Diff for: apps/site/hooks/react-client/__tests__/useClientContext.test.mjs renamed to apps/site/hooks/react-client/__tests__/useClientContext.test.jsx

@@ -3,6 +3,9 @@ import { renderHook } from '@testing-library/react';
 import useClientContext from '@/hooks/react-client/useClientContext';
 import { MatterContext } from '@/providers/matterProvider';
 
+import { describe, it } from 'node:test';
+import assert from 'node:assert';
+
 describe('useClientContext', () => {
   it('should return client context values', () => {
     const mockContextValue = {
@@ -21,6 +24,6 @@ describe('useClientContext', () => {
 
     const { result } = renderHook(() => useClientContext(), { wrapper });
 
-    expect(result.current).toEqual(mockContextValue);
+    assert.partialDeepStrictEqual(result.current, mockContextValue);
   });
 });

Diff for: apps/site/hooks/react-client/__tests__/useCopyToClipboard.test.jsx

@@ -0,0 +1,43 @@
+import { render, fireEvent, screen } from '@testing-library/react';
+import { describe, it } from 'node:test';
+import assert from 'node:assert';
+import { setTimeout } from 'node:timers/promises';
+
+import useCopyToClipboard from '@/hooks/react-client/useCopyToClipboard';
+
+navigator.clipboard = { writeText: () => {} };
+
+await describe('useCopyToClipboard', async () => {
+  await it('should call clipboard API with `test` once', async t => {
+    t.mock.method(navigator.clipboard, 'writeText', () => Promise.resolve());
+
+    const TestComponent = ({ textToCopy }) => {
+      const [copied, copyText] = useCopyToClipboard();
+
+      return (
+        <button onClick={() => copyText(textToCopy)} type="button">
+          {copied ? 'copied' : 'copy'}
+        </button>
+      );
+    };
+
+    render(<TestComponent textToCopy="test" />);
+
+    const button = screen.getByRole('button');
+
+    fireEvent.click(button);
+
+    assert.ok((await screen.findByText(/copied/i)).ownerDocument);
+
+    // TODO(@avivkeller): Once https://github.com/testing-library/react-testing-library/issues/1393 is resolved, we should move to mocking
+    await setTimeout(3000);
+
+    assert.ok((await screen.findByText(/copy/i)).ownerDocument);
+
+    assert(navigator.clipboard.writeText.mock.callCount(), 1);
+    assert.deepStrictEqual(
+      navigator.clipboard.writeText.mock.calls[0].arguments,
+      ['test']
+    );
+  });
+});