fix(examples): improve handling of local jest config and remove RTL clean hack

change/@nova-examples-4250c57c-5ffc-4445-a314-deecf9b17553.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "improve handling of jest config and remove RTL clean hack",
+  "packageName": "@nova/examples",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/examples/jest.config.ts

@@ -0,0 +1,21 @@
+import config from "../../scripts/config/jest.config";
+
+export default {
+  ...config,
+  transform: {
+    "\\.(gql|graphql)$": "@graphql-tools/jest-transform",
+    // Needed for packages/examples to load relay compiler generated artifacts.
+    // It would be better if it could be config local to examples package but haven't found a way to configure it with just
+    ".+[\\\\/]relay[\\\\/].+\\.tsx?$":
+      "@graphitation/embedded-document-artefact-loader/ts-jest",
+    "^.+\\.tsx?$": [
+      "ts-jest",
+      {
+        tsconfig: {
+          // prevents error about graphql import not being used when artifacts are loaded
+          noUnusedLocals: false,
+        },
+      },
+    ],
+  },
+};

packages/examples/src/testing-utils/executePlayFunction.ts

@@ -3,7 +3,7 @@ import type {
   ComposedStoryPlayContext,
   ComposedStoryFn,
 } from "@storybook/types";
-import { act, waitFor } from "@testing-library/react";
+import { act, waitFor } from "@testing-library/react/pure";
 
 type PlayFunctionThatReturnsPromise = (
   options: ComposedStoryPlayContext<ReactRenderer>,

scripts/config/jest.config.ts

@@ -1,32 +1,10 @@
 import path from "path";
-import fs from "fs";
-
-const getTsConfigPath = () => {
-  if (fs.existsSync(path.join(process.cwd(), "tsconfig.jest.json"))) {
-    return "<rootDir>/tsconfig.jest.json";
-  } else {
-    return "<rootDir>/tsconfig.json";
-  }
-};
 
 export default {
+  preset: "ts-jest",
   rootDir: process.cwd(),
   roots: ["<rootDir>/src"],
   testPathIgnorePatterns: ["node_modules", "__generated__"],
   testEnvironment: "jsdom",
-  transform: {
-    "\\.(gql|graphql)$": "@graphql-tools/jest-transform",
-    // Needed for packages/examples to load relay compiler generated artifacts.
-    // It would be better if it could be config local to examples package but haven't found a way to configure it with just
-    ".+[\\\\/]relay[\\\\/].+\\.tsx?$":
-      "@graphitation/embedded-document-artefact-loader/ts-jest",
-    "^.+\\.tsx?$": [
-      "ts-jest",
-      {
-        tsconfig: getTsConfigPath(),
-      },
-    ],
-  },
   setupFiles: [path.join(__dirname, "jest.setup.ts")],
-  setupFilesAfterEnv: [path.join(__dirname, "jest.setupAfterEnv.ts")],
 };

scripts/config/jest.setup.ts

@@ -1,4 +1,4 @@
-import { configure } from "@testing-library/react";
+import { configure } from "@testing-library/react/pure";
 
 configure({
   reactStrictMode: true,

scripts/just.config.ts

@@ -66,8 +66,11 @@ export const build = () => {
 };
 
 export const test = () => {
+  const config = fs.existsSync(path.join(process.cwd(), "jest.config.ts"))
+    ? path.join(process.cwd(), "jest.config.ts") // if it exists prioritize using package local config
+    : path.join(__dirname, "config", "jest.config.ts");
   return jestTask({
-    config: path.join(__dirname, "config", "jest.config.ts"),
+    config,
     watch: argv().watch,
     _: argv()._,
   });