6 setup jest (#10)

- updated jest config
- added example tests
- added make target
- added rtl config overrides and exposed as module

Author: bubulux

.eslintignore

@@ -1,2 +1,3 @@
 jest.config.ts
-jest.setup.ts
+jest.setup.ts
+react-testing-library.tsx

.gitignore

@@ -1,2 +1,3 @@
 /node_modules
-/dist
+/dist
+/coverage

.vscode/react.code-snippets

@@ -34,7 +34,7 @@
   "React Component Test": {
     "prefix": "retes",
     "body": [
-      "//import { render, screen } from '@tests-unit-browser';",
+      "// import { render, screen } from '@test-utils';",
       "import '@testing-library/jest-dom';",
       "",
       "describe('${TM_DIRECTORY/.*\\/(.*)$/$1/}', () => {",

jest.config.ts

@@ -9,10 +9,7 @@ const compilerOptions = jsonc.parse(tsconfigContent).compilerOptions;
 
 const config = {
   testEnvironment: "jsdom",
-  transformIgnorePatterns: [
-    // @fluentui/react-icons
-    "node_modules/(?!(@fluentui/react-icons)/)",
-  ],
+  transformIgnorePatterns: ["node_modules/(?!(@fluentui/react-icons)/)"],
   verbose: true,
   setupFilesAfterEnv: ["<rootDir>/jest.setup.ts"],
   moduleFileExtensions: ["ts", "tsx", "js"],
@@ -21,6 +18,16 @@ const config = {
   }),
   testMatch: ["**/tests.{ts,tsx}"],
   collectCoverage: true,
+  transform: {
+    "^.+\\.tsx?$": [
+      "ts-jest",
+      {
+        tsconfig: "./tsconfig.json",
+        useESM: true,
+      },
+    ],
+  },
+  preset: "ts-jest",
 };
 
 export default config;

react-testing-library.tsx

@@ -0,0 +1,19 @@
+import type { ReactNode } from "react";
+
+import { render } from "@testing-library/react";
+import type { RenderOptions } from "@testing-library/react";
+
+import { ThemeProvider } from "./src/theme";
+
+function AllTheProviders({ children }: { children: ReactNode }) {
+  return <ThemeProvider>{children}</ThemeProvider>;
+}
+
+const customRender = (
+  ui: ReactNode,
+  options?: Omit<RenderOptions, "wrapper">
+) => render(ui, { wrapper: AllTheProviders, ...options });
+
+export * from "@testing-library/react";
+
+export { customRender as render };

src/components/layout/Flex/tests.tsx

@@ -0,0 +1,8 @@
+// import { render, screen } from '@test-utils';
+import "@testing-library/jest-dom";
+
+describe("Flex", () => {
+  it("should render", () => {
+    expect(true).toBe(true);
+  });
+});

src/theme/Provider/func.tsx

@@ -6,10 +6,10 @@ import { useClasses, useStaticStyles } from "@theme/Provider/styles";
 
 export default function ThemeProvider({
   children,
-  theme,
+  theme = "light",
 }: {
   children: ReactNode;
-  theme: "light" | "dark";
+  theme?: "light" | "dark";
 }) {
   useStaticStyles();
 

src/theme/Provider/tests.tsx

@@ -1,4 +1,4 @@
-import { render, screen } from "@tests-unit-browser";
+import { render, screen } from "@test-utils";
 import "@testing-library/jest-dom";
 
 import ThemeProvider from "@theme/Provider/func";

tsconfig.json

@@ -9,6 +9,7 @@
     "lib": ["ES2020", "DOM", "DOM.Iterable"],
     "module": "ESNext",
     "skipLibCheck": true,
+    "esModuleInterop": true,
 
     // Bundler mode
     "moduleResolution": "bundler",
@@ -23,7 +24,8 @@
       "@animations/*": ["src/animations/*"],
       "@components/*": ["src/components/*"],
       "@hooks/*": ["src/hooks/*"],
-      "@theme/*": ["src/theme/*"]
+      "@theme/*": ["src/theme/*"],
+      "@test-utils": ["react-testing-library.tsx"]
     }
   },
   "include": ["src"]