fix(react-test-utils): fix remaining integration issues (#109)

* fix issues with dependencies * Change files * try to fix jest * fix lock * remove wrong imports * add eslint * fix build issues * Change files * update readme * try removing preset * try ts-jest bump * use local tsconfigs for jest * adjust lage config * bring back files to prevent need from consumers to use moduleResolution bundler --------- Co-authored-by: Stanislaw Wilczynski <[email protected]>
microsoft · Sep 17, 2024 · 37d880d · 37d880d
1 parent 32118d3
commit 37d880d
Show file tree

Hide file tree

Showing 29 changed files with 604 additions and 471 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -2,7 +2,8 @@
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
     "ecmaVersion": 2019,
-    "sourceType": "module"
+    "sourceType": "module",
+    "project": "./tsconfig.json"
   },
   "env": {
     "browser": true,
@@ -18,7 +19,8 @@
         "disallowTypeAnnotations": true,
         "prefer": "type-imports"
       }
-    ]
+    ],
+    "@typescript-eslint/no-unsafe-member-access": "warn"
   },
   "extends": ["plugin:@typescript-eslint/recommended", "prettier"]
 }
diff --git a/change/@nova-examples-697bc880-9f3e-4383-88dc-882005af2e13.json b/change/@nova-examples-697bc880-9f3e-4383-88dc-882005af2e13.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "use bundler module resolution",
+  "packageName": "@nova/examples",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@nova-graphql-compiler-58fb74fb-c4bd-45ab-a0c6-97cd3f44a110.json b/change/@nova-graphql-compiler-58fb74fb-c4bd-45ab-a0c6-97cd3f44a110.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix TS version",
+  "packageName": "@nova/graphql-compiler",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@nova-react-1c909731-df94-4aae-8401-343a91a287ea.json b/change/@nova-react-1c909731-df94-4aae-8401-343a91a287ea.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "use bundler module resolution",
+  "packageName": "@nova/react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@nova-react-test-utils-08977333-6b8c-48b3-9634-fcb346089ad7.json b/change/@nova-react-test-utils-08977333-6b8c-48b3-9634-fcb346089ad7.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "fix issues with dependencies",
+  "packageName": "@nova/react-test-utils",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@nova-types-2dd7c344-0151-4014-a486-33756652f003.json b/change/@nova-types-2dd7c344-0151-4014-a486-33756652f003.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "use bundler module resolution",
+  "packageName": "@nova/types",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/lage.config.js b/lage.config.js
@@ -3,7 +3,7 @@ module.exports = {
     prepare: [],
     types: ["^types"],
     build: [],
-    test: ["build"],
+    test: ["^build", "^types"],
     lint: [],
   },
   npmClient: "yarn",

diff --git a/package.json b/package.json
@@ -25,5 +25,8 @@
     "beachball": "2.31.12",
     "lage": "2.7.15",
     "prettier": "^2.8.1"
+  },
+  "resolutions": {
+    "**/relay-compiler-language-graphitation/typescript": "<5"
   }
 }
diff --git a/packages/examples/package.json b/packages/examples/package.json
@@ -31,8 +31,8 @@
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.21.0",
     "@graphitation/embedded-document-artefact-loader": "^0.8.0",
-    "@graphitation/graphql-codegen-typescript-typemap-plugin": "^0.1.5",
-    "@graphitation/graphql-js-tag": "^0.9.0",
+    "@graphitation/graphql-codegen-typescript-typemap-plugin": "^0.1.6",
+    "@graphitation/graphql-js-tag": "^0.9.1",
     "@graphql-codegen/add": "^4.0.1",
     "@graphql-codegen/cli": "^3.2.2",
     "@graphql-codegen/typescript": "^3.0.2",
@@ -56,7 +56,7 @@
     "prop-types": "15.8.1",
     "relay-compiler": "^17.0.0",
     "storybook": "^7.6.19",
-    "typescript": ">=4.9.5"
+    "typescript": "^5.6.0"
   },
   "sideEffects": false
 }
diff --git a/packages/examples/tsconfig.jest.json b/packages/examples/tsconfig.jest.json
@@ -0,0 +1,6 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "noUnusedLocals": false,
+  }
+}
diff --git a/packages/examples/tsconfig.json b/packages/examples/tsconfig.json
@@ -1,6 +1,7 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
+    "moduleResolution": "Bundler",
     "jsx": "react",
     "composite": true,
     "tsBuildInfoFile": ".tsbuildinfo",

diff --git a/packages/nova-graphql-compiler/README.md b/packages/nova-graphql-compiler/README.md
@@ -19,3 +19,5 @@ Then inside your package.json add the compiler to your `scripts`:
   }
 }
 ```
+
+**NOTE**: Both `duct-tape-compiler` and `@nova/graphql-compiler` are not compatible with Typescript 5.x. When you upgrade to Typescript 5.x, make sure to force resolution to Typescript 4.x for both compilers and it's dependencies like `relay-compiler-language-graphitation`.
diff --git a/packages/nova-graphql-compiler/package.json b/packages/nova-graphql-compiler/package.json
@@ -16,7 +16,8 @@
     "graphql": "^15.5.0",
     "relay-compiler": "^12.0.0",
     "relay-compiler-language-graphitation": "^0.8.2",
-    "yargs": "^16.2.0"
+    "yargs": "^16.2.0",
+    "typescript": "<5"
   },
   "devDependencies": {
     "cross-spawn": "^7.0.0",

diff --git a/packages/nova-graphql-compiler/tsconfig.json b/packages/nova-graphql-compiler/tsconfig.json
@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": ".tsbuildinfo",
+    "rootDir": "src",
+    "outDir": "lib"
+  },
+  "include": ["src"],
+  "references": []
+}
diff --git a/packages/nova-react-test-utils/package.json b/packages/nova-react-test-utils/package.json
@@ -17,8 +17,8 @@
     "@storybook/types": ">7.6",
     "react": "^17 || ^18",
     "@apollo/client": "^3.4",
-    "@graphitation/apollo-react-relay-duct-tape": "^1.0.30",
-    "@graphitation/apollo-mock-client": "^0.11.0",
+    "@graphitation/apollo-react-relay-duct-tape": "^1.1.0",
+    "@graphitation/apollo-mock-client": "^0.11.4",
     "react-relay": ">16",
     "relay-runtime": ">16",
     "relay-test-utils": ">16",
@@ -55,9 +55,9 @@
     }
   },
   "dependencies": {
-    "@graphitation/graphql-js-operation-payload-generator": "^0.12.0",
-    "@graphitation/graphql-js-tag": "^0.9.0",
-    "@jest/globals": ">27.0.0",
+    "@graphitation/graphql-js-operation-payload-generator": "^0.12.5",
+    "@graphitation/graphql-js-tag": "^0.9.1",
+    "@jest/types": ">27.0.0",
     "@nova/react": "^2.6.0",
     "@nova/types": "^1.5.0",
     "@types/react": "^17 || ^18",
@@ -69,8 +69,8 @@
   },
   "devDependencies": {
     "@apollo/client": "^3.4.15",
-    "@graphitation/apollo-react-relay-duct-tape": "^1.0.30",
-    "@graphitation/apollo-mock-client": "^0.11.0",
+    "@graphitation/apollo-react-relay-duct-tape": "^1.1.0",
+    "@graphitation/apollo-mock-client": "^0.11.4",
     "@storybook/addon-actions": "^7.6.19",
     "@storybook/preview-api": "^7.6.19",
     "@storybook/react": "^7.6.19",
@@ -96,6 +96,23 @@
   },
   "sideEffects": false,
   "access": "public",
+  "exports": {
+    ".": {
+      "import": "./lib/relay/index.mjs",
+      "require": "./lib/relay/index.js",
+      "types": "./lib/relay/index.d.ts"
+    },
+    "./relay": {
+      "import": "./lib/relay/index.mjs",
+      "require": "./lib/relay/index.js",
+      "types": "./lib/relay/index.d.ts"
+    },
+    "./apollo": {
+      "import": "./lib/apollo/index.mjs",
+      "require": "./lib/apollo/index.js",
+      "types": "./lib/apollo/index.d.ts"
+    }
+  },
   "publishConfig": {
     "main": "./lib/relay/index",
     "types": "./lib/relay/index.d.ts",
@@ -105,6 +122,16 @@
         "import": "./lib/relay/index.mjs",
         "require": "./lib/relay/index.js",
         "types": "./lib/relay/index.d.ts"
+      },
+      "./relay": {
+        "import": "./lib/relay/index.mjs",
+        "require": "./lib/relay/index.js",
+        "types": "./lib/relay/index.d.ts"
+      },
+      "./apollo": {
+        "import": "./lib/apollo/index.mjs",
+        "require": "./lib/apollo/index.js",
+        "types": "./lib/apollo/index.d.ts"
       }
     }
   }

diff --git a/packages/nova-react-test-utils/src/apollo/index.ts b/packages/nova-react-test-utils/src/apollo/index.ts
@@ -5,6 +5,8 @@ export type {
   WithNovaEnvironment,
   UnknownOperation,
   WithoutFragmentRefs,
+  MockResolvers,
+  DefaultMockResolvers,
 } from "../shared/storybook-nova-decorator-shared";
 
 export {

diff --git a/packages/nova-react-test-utils/src/apollo/test-utils.tsx b/packages/nova-react-test-utils/src/apollo/test-utils.tsx
@@ -9,7 +9,6 @@ import type { OperationDescriptor } from "@graphitation/graphql-js-operation-pay
 import { generate as payloadGenerator } from "@graphitation/graphql-js-operation-payload-generator";
 import type { GraphQLTaggedNode } from "@nova/react";
 import type { NovaGraphQL } from "@nova/types";
-import { jest } from "@jest/globals";
 
 type MockClientOptions = Parameters<typeof createMockClient>[1];
 

diff --git a/packages/nova-react-test-utils/src/relay/index.ts b/packages/nova-react-test-utils/src/relay/index.ts
@@ -5,6 +5,8 @@ export type {
   WithNovaEnvironment,
   UnknownOperation,
   WithoutFragmentRefs,
+  MockResolvers,
+  DefaultMockResolvers,
 } from "../shared/storybook-nova-decorator-shared";
 
 export {

diff --git a/packages/nova-react-test-utils/src/relay/test-utils.tsx b/packages/nova-react-test-utils/src/relay/test-utils.tsx
@@ -9,7 +9,6 @@ import type { OperationDescriptor as RelayOperationDescriptor } from "relay-runt
 import { novaGraphql } from "./nova-relay-graphql";
 import { createMockEnvironment } from "relay-test-utils";
 import { RelayEnvironmentProvider } from "react-relay";
-import { jest } from "@jest/globals";
 
 export class RelayMockPayloadGenerator {
   public gqlSchema: GraphQLSchema;

diff --git a/packages/nova-react-test-utils/src/shared/nova-mock-environment.tsx b/packages/nova-react-test-utils/src/shared/nova-mock-environment.tsx
@@ -15,7 +15,6 @@ import {
   NovaGraphQLProvider,
 } from "@nova/react";
 import type { Variant } from "./shared-utils";
-import type { jest } from "@jest/globals";
 
 type RelayMockFunctions = MockEnvironment["mock"];
 type Environment = "test" | "storybook";

diff --git a/packages/nova-react-test-utils/src/shared/storybook-nova-decorator-shared.tsx b/packages/nova-react-test-utils/src/shared/storybook-nova-decorator-shared.tsx
@@ -16,6 +16,7 @@ import type { Variant } from "./shared-utils";
 
 type Context = Parameters<Parameters<typeof makeDecorator>[0]["wrapper"]>[1];
 
+export type { MockResolvers };
 export type DefaultMockResolvers = Partial<{
   ID: string;
   Boolean: boolean;

diff --git a/packages/nova-react-test-utils/tsconfig.json b/packages/nova-react-test-utils/tsconfig.json
@@ -1,6 +1,7 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
+    "moduleResolution": "Bundler",
     "jsx": "react",
     "composite": true,
     "tsBuildInfoFile": ".tsbuildinfo",

diff --git a/packages/nova-react/package.json b/packages/nova-react/package.json
@@ -13,15 +13,15 @@
   "peerDependencies": {
     "react": "^17.0.2 || ^18",
     "@types/react": "^17.0.2 || ^18",
-    "@graphitation/graphql-js-tag": "^0.9.0"
+    "@graphitation/graphql-js-tag": "^0.9.1"
   },
   "dependencies": {
     "@nova/types": "^1.5.0",
     "graphql": "^15.5.0",
     "invariant": "^2.2.4"
   },
   "devDependencies": {
-    "@graphitation/graphql-js-tag": "^0.9.0",
+    "@graphitation/graphql-js-tag": "^0.9.1",
     "@testing-library/react": "^15.0.0",
     "@types/invariant": "^2.2.35",
     "@types/jest": "^29.2.0",

diff --git a/packages/nova-react/tsconfig.json b/packages/nova-react/tsconfig.json
@@ -1,6 +1,7 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
+    "moduleResolution": "Bundler",
     "jsx": "react",
     "composite": true,
     "tsBuildInfoFile": ".tsbuildinfo",

diff --git a/packages/nova-types/tsconfig.json b/packages/nova-types/tsconfig.json
@@ -1,6 +1,7 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
+    "moduleResolution": "Bundler",
     "composite": true,
     "tsBuildInfoFile": ".tsbuildinfo",
     "rootDir": "src",

diff --git a/scripts/config/jest.config.ts b/scripts/config/jest.config.ts
@@ -1,7 +1,15 @@
 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__"],
@@ -15,10 +23,7 @@ export default {
     "^.+\\.tsx?$": [
       "ts-jest",
       {
-        tsconfig: {
-          // prevents error about graphql import not being used when artifacts are loaded
-          noUnusedLocals: false,
-        },
+        tsconfig: getTsConfigPath(),
       },
     ],
   },

diff --git a/scripts/package.json b/scripts/package.json
@@ -18,11 +18,11 @@
     "eslint": "^8.30.0",
     "eslint-config-prettier": "^8.5.0",
     "fast-glob": "^3.2.5",
-    "jest": "^29.1.0",
-    "jest-environment-jsdom": "^29.0.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "just-scripts": "^2.1.0",
-    "ts-jest": "^29.0.0",
+    "ts-jest": "^29.2.0",
     "ts-node": "^10.4.0",
-    "typescript": ">=4.9.5"
+    "typescript": "^5.6.0"
   }
 }
diff --git a/tsconfig.json b/tsconfig.json
@@ -10,7 +10,6 @@
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,
     "isolatedModules": true,
-    "importsNotUsedAsValues": "error",
     "forceConsistentCasingInFileNames": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true
-Original file line number
+Diff line change
@@ Expand Up @@
       }
     }
     ```
+    **NOTE**: Both `duct-tape-compiler` and `@nova/graphql-compiler` are not compatible with Typescript 5.x. When you upgrade to Typescript 5.x, make sure to force resolution to Typescript 4.x for both compilers and it's dependencies like `relay-compiler-language-graphitation`.