Fixing tests

Author: Daniel Petersen

src/App.test.tsx

@@ -1,7 +1,6 @@
 import { describe, expect, it } from "vitest";
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
 import App from "./App";
+import { render, screen, userEvent } from "./test/utils";
 
 describe("Simple working test", () => {
   it("the title is visible", () => {

src/setupTests.ts

@@ -1,13 +1,2 @@
 /// <reference types="vitest/globals" />
-import { expect, afterEach } from "vitest";
-import { cleanup } from "@testing-library/react";
-import "@testing-library/jest-dom/extend-expect";
-import matchers from "@testing-library/jest-dom/matchers";
-
-// extends Vitest's expect method with methods from react-testing-library
-expect.extend(matchers);
-
-// runs a cleanup after each test case (e.g. clearing jsdom)
-afterEach(() => {
-  cleanup();
-});
+import "@testing-library/jest-dom";

src/test/utils.tsx

@@ -0,0 +1,19 @@
+/* eslint-disable react-refresh/only-export-components */
+import { cleanup, render } from "@testing-library/react";
+import { afterEach } from "vitest";
+
+afterEach(() => {
+  cleanup();
+});
+
+const customRender = (ui: React.ReactElement, options = {}) =>
+  render(ui, {
+    // wrap provider(s) here if needed
+    wrapper: ({ children }) => children,
+    ...options,
+  });
+
+export * from "@testing-library/react";
+export { default as userEvent } from "@testing-library/user-event";
+// override render export
+export { customRender as render };

tsconfig.json

@@ -20,6 +20,6 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true
   },
-  "include": ["src", "jest", "@testing-library/jest-dom"],
+  "include": ["src"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }

vite.config.ts

@@ -1,7 +1,7 @@
 /// <reference types="vitest" />
 /// <reference types="vite/client" />
 
-import { defineConfig } from "vite";
+import { defineConfig } from "vitest/config";
 import react from "@vitejs/plugin-react";
 
 // https://vitejs.dev/config/
@@ -10,6 +10,7 @@ export default defineConfig({
   test: {
     globals: true,
     environment: "jsdom",
-    setupFiles: "./src/setupTests.ts",
+    setupFiles: "./src/setupTests",
+    mockReset: true,
   },
 });