npm install --save-dev \
  jest \
  ts-jest \
  jest-styled-components \
  @types/jest

npm install --save-dev \
  @testing-library/react \
  @testing-library/jest-dom \
  @testing-library/react-hooks \
  @testing-library/user-event

module.exports = {
  roots: ["<rootDir>/src"],
  testMatch: [
    "**/__tests__/**/*.+(ts|tsx|js)",
    "**/?(*.)+(spec|test).+(ts|tsx|js)",
  ],
  transform: {
    "^.+\\.(ts|tsx)$": "ts-jest",
  },
};

   "scripts": {
     "dev": "vite",
+    "test": "jest",
+    "test:watch": "jest --watch",
     "build:dev": "tsc && vite build",
     "serve": "vite preview"
   },

Cannot find module '@/path/to/module' from 'src/components/xxx.tsx'

import { resolve } from "path";

import reactRefresh from "@vitejs/plugin-react-refresh";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [reactRefresh()],
  resolve: {
    alias: {
      "@": resolve(__dirname, "src"),
    },
  },
});

    transform: {
      "^.+\\.(ts|tsx)$": "ts-jest",
    },
 +  moduleNameMapper: {
 +    "^@/(.*)$": "<rootDir>/src/$1",
 +  },
  };

error TS1343: The 'import.meta' meta-property is only allowed when the '--module' option is 'es2020', 'es2022', 'esnext', 'system', 'node12', or 'nodenext'.

import { defineConfig, loadEnv } from 'vite'

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd())

  // expose .env as process.env instead of import.meta since jest does not import meta yet
  const envWithProcessPrefix = Object.entries(env).reduce(
    (prev, [key, val]) => {
      return {
        ...prev,
        ['process.env.' + key]: `"${val}"`,
      }
    },
    {},
  )

  return {
    define: envWithProcessPrefix,
  }
})

TypeError: Cannot read properties of undefined (reading 'createElement')

       7 |
       8 | test("SomeComponent", () => {
    >  9 |   render(<SomeCOmponent />);
         |          ^
      10 |   screen.debug();
      11 |   expect(screen.getByText("Hello Test")).toBeInTheDocument();
      12 | });

-    "esModuleInterop": false,
+    "esModuleInterop": true,

The error below may be caused by using the wrong test environment, see https://jestjs.io/docs/configuration#testenvironment-string.
Consider using the "jsdom" test environment.

   moduleNameMapper: {
     "^@/(.*)$": "<rootDir>/src/$1",
   },
+  testEnvironment: "jsdom",
 };

TypeError: expect(...).toBeInTheDocument is not a function

     "^@/(.*)$": "<rootDir>/src/$1",
   },
   "testEnvironment": "jsdom",
+  setupFilesAfterEnv: ["<rootDir>/jest.setup.ts"],
 };

import "@testing-library/jest-dom";

DEBUG_PRINT_LIMIT=10000

import React, { useCallback, useState } from "react";

import { Modal } from "./Modal";

type RenderProps = {
  children: JSX.Element;
};

export const useModal = (): readonly [
  ({ children }: RenderProps) => JSX.Element,
  () => void
] => {
  const [isOpen, setIsOpen] = useState(false);
  const open = useCallback(() => setIsOpen(true), []);
  const close = useCallback(() => setIsOpen(false), []);

  const Component = useCallback(
    ({ children }: RenderProps) => {
      return (
        <Modal open={isOpen} onClose={close}>
          {children}
        </Modal>
      );
    },
    [close, isOpen]
  );

  return [Component, open] as const;
};

import { render, screen } from "@testing-library/react";
import { renderHook } from "@testing-library/react-hooks";
import userEvent from "@testing-library/user-event";
import React from "react";

import { useModal } from "./useModal";

test("モーダルを開くまではモーダルは表示されない", async () => {
  const { result } = renderHook(() => useModal());
  const [Modal] = result.current;

  render(
    <>
      <button onClick={open}></button>
      <Modal>
        <span>コンテンツ</span>
      </Modal>
    </>
  );

  expect(screen.queryByText("コンテンツ")).not.toBeInTheDocument();
});

test("モーダルを開くとモーダルが表示される", async () => {
  const { result } = renderHook(() => useModal());
  const [Modal, open] = result.current;

  render(
    <>
      <button onClick={open}></button>
      <Modal>
        <span>コンテンツ</span>
      </Modal>
    </>
  );
  const button = screen.getByRole("button");
  userEvent.type(button, "{enter}");

  expect(screen.getByText("コンテンツ")).toBeInTheDocument();
});

● モーダルを開くとモーダルが表示される

    TestingLibraryElementError: Unable to find an element with the text: コンテンツ. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

    Ignored nodes: comments, <script />, <style />
    <body>
      <div>
        <button />
      </div>
    </body>

      34 |   userEvent.type(button, "{enter}");
      35 |
    > 36 |   expect(screen.getByText("コンテンツ")).toBeInTheDocument();
         |                 ^
      37 | });
      38 |

test("モーダルを開くとモーダルが表示される", async () => {
  const Component = () => {
    const [Modal, open] = useModal();

    return (
      <>
        <button onClick={open}></button>
        <Modal>
          <span>コンテンツ</span>
        </Modal>
      </>
    );
  };

  render(<Component />);
  const button = screen.getByRole("button");
  userEvent.type(button, "{enter}");

  expect(screen.getByText("コンテンツ")).toBeInTheDocument();
});

npm i -D jest @swc/core @swc/jest

   transform: {
-    "^.+\\.(ts|tsx)$": "ts-jest",
+    "^.+\\.(ts|tsx)$": [
+      "@swc/jest",
+      {
+        sourceMaps: "inline",
+        module: {
+          type: "commonjs",
+        },
+        jsc: {
+          parser: {
+            syntax: "typescript",
+            tsx: true,
+          },
+          transform: {
+            react: {
+              runtime: "automatic",
+            },
+          },
+        },
+      }
+    ],
   },