feat(esm): @cedarjs/testing dual ESM/CJS build (#163)

The testing package is a bit weird in that it has both a `src/`
directory and a `config/` directory with code. Plus `api/`, `cache/` and
`/web` with just an index file and a package.json. I know what to do
with the `src/` directory - same as I've done with all the other ESM/CJS
conversions. But not sure what to do with the rest of the directories
yet.

⚠️ The goal is that this change should be non-breakable, but if you're
doing dist imports from `@cedarjs/testing` it might be. Please let me
know in that case and I'll fix it.

Author: Tobbe

.changesets/163.md

@@ -0,0 +1,8 @@
+- feat(esm): `@cedarjs/testing` dual ESM/CJS build (#163) by @Tobbe
+
+This PR allows both CJS and ESM projects to use the `@cedarjs/testing` package.
+Among other things it does this by adding `exports` to the package.json file.
+
+⚠️ The goal is that this change should be non-breakable, but if you're doing
+dist imports from `@cedarjs/testing` it might be. Please let me know in that
+case and I'll fix it.

packages/storybook/src/mocks/MockProviders.tsx

@@ -5,7 +5,7 @@
 import React from 'react'
 
 import { LocationProvider } from '@cedarjs/router'
-import { useAuth } from '@cedarjs/testing/web'
+import { useAuth } from '@cedarjs/testing/auth'
 import { RedwoodProvider } from '@cedarjs/web'
 import { RedwoodApolloProvider } from '@cedarjs/web/apollo'
 

packages/storybook/src/plugins/mock-auth.ts

@@ -15,7 +15,7 @@ export function mockAuth(): PluginOption {
         )
         // Add import to mocked `createAuth` at the top of the file.
         code =
-          "import { createAuthentication as createAuth } from '@cedarjs/testing/dist/web/mockAuth.js'\n" +
+          "import { createAuthentication as createAuth } from '@cedarjs/testing/auth'\n" +
           code
       }
       return code

packages/storybook/tsconfig.json

@@ -4,7 +4,11 @@
   "compilerOptions": {
     "outDir": "./dist",
     "rootDir": "./src",
-    "types": ["node", "vite/client"]
+    "types": ["node", "vite/client"],
+    "paths": {
+      "@cedarjs/testing/auth": ["../testing/dist/web/mockAuth.d.ts"],
+      "@cedarjs/testing/web": ["../testing/dist/web/index.d.ts"]
+    }
   },
   "include": ["src/**/*"]
 }

packages/testing/api/index.js

@@ -1,3 +1,31 @@
-import { build } from '@cedarjs/framework-tools'
+import fs from 'node:fs'
 
-await build()
+import { buildCjs, buildEsm } from '@cedarjs/framework-tools'
+import {
+  generateTypesCjs,
+  generateTypesEsm,
+  insertCommonJsPackageJson,
+} from '@cedarjs/framework-tools/generateTypes'
+
+await buildEsm()
+await generateTypesEsm()
+
+await buildCjs()
+await generateTypesCjs()
+await insertCommonJsPackageJson({
+  buildFileUrl: import.meta.url,
+})
+
+// ./src/web/mockRequests.js contains `... = await import('msw/node'`. When
+// building for CJS esbuild correctly preserves the `await import` statement
+// because it's valid in both CJS and ESM (whereas regular imports are only
+// valid in ESM).
+// The problem is that this file will be consumed by Jest, and jest doesn't
+// support that syntax. They only support `require()`.
+// That's why we have to do manual editing of built files here
+const mockRequestsBuildPath = './dist/cjs/web/mockRequests.js'
+const mockRequestsFile = fs.readFileSync(mockRequestsBuildPath, 'utf-8')
+fs.writeFileSync(
+  mockRequestsBuildPath,
+  mockRequestsFile.replaceAll('await import', 'require'),
+)

packages/testing/api/package.json

@@ -4,7 +4,7 @@
 // @NOTE without these imports in the setup file, mockCurrentUser
 // will remain undefined in the user's tests
 // Remember to use specific imports
-const { defineScenario } = require('@cedarjs/testing/dist/api/scenario')
+const { defineScenario } = require('@cedarjs/testing/dist/cjs/api/scenario')
 
 // @NOTE we do this because jest.setup.js runs every time in each context
 // while jest-preset runs once. This significantly reduces memory footprint, and testing time