fiberplane / fpx

Supercharge your local development
https://fiberplane.dev
MIT License
21 stars 0 forks source link

FPX middleware for hono does not play nicely with vitest or jest #71

Open brettimus opened 3 weeks ago

brettimus commented 3 weeks ago

On an initial attempt, I couldn't get vitest to run with FPX hono middleware. This was my tsconfig:

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "esModuleInterop": true,
    "moduleResolution": "Bundler",
    "strict": true,
    "skipLibCheck": true,
    "lib": [
      "ESNext"
    ],
    "types": [
        "vitest/globals",
        "@cloudflare/workers-types/2023-07-01"
    ],
    "jsx": "react-jsx",
    "jsxImportSource": "hono/jsx",
    "resolveJsonModule": true
  },
}

Failed to run on both v1.6.0 and v2.0.2

I got the following error:

Error: Cannot find module '/Users/brettbeutell/fiber/goose-quotes/node_modules/@fiberplane/hono/dist/honoMiddleware' imported from /Users/brettbeutell/fiber/goose-quotes/node_modules/@fiberplane/hono/dist/index.js

The problem appears to be that our compiled typescript imports without specifying the extension of the file it's importing.

// we do this in the package
export { createHonoMiddleware } from "./honoMiddleware";

// but this would work better in this particular example
export { createHonoMiddleware } from "./honoMiddleware.js";

This could cause problems depending on the typescript configuration and node setup.

brettimus commented 3 weeks ago

The simplest (but also a clunky) solution appears to be to update the client library code to add .js to all its imports. @flenter will not like this :D

brettimus commented 3 weeks ago

EDIT

got things working in Jest with the following config:

/** @type {import('ts-jest').JestConfigWithTsJest} **/
module.exports = {
  preset: 'ts-jest',
  testEnvironment: "node",
  transform: {
    "^.+.tsx?$": ["ts-jest",{
      useESM: true,
    }]
  },
  extensionsToTreatAsEsm: ['.ts', '.tsx'],
};

then also running jest with experimental modules support:

    "test": "NODE_OPTIONS=\"$NODE_OPTIONS --experimental-vm-modules\" jest"

===

tried setting up jest, but jest doesn't play too well with ts + esm from what i can tell 🤔

test NODE_OPTIONS="$NODE_OPTIONS --experimental-vm-modules" jest

FAIL src/index.test.ts ● Test suite failed to run

Must use import to load ES Module: /Users/brettbeutell/fiber/goose-quotes/node_modules/@fiberplane/hono/dist/index.js

  1 | import { Hono } from 'hono';
> 2 | import { createHonoMiddleware } from '@fiberplane/hono';
    | ^
  3 | import { neon } from '@neondatabase/serverless';
  4 | import { drizzle } from 'drizzle-orm/neon-http';
  5 | import { asc, eq, ilike } from 'drizzle-orm';

  at Runtime.requireModule (node_modules/jest-runtime/build/index.js:850:21)
  at Object.<anonymous> (src/index.ts:2:1)
  at Object.<anonymous> (src/index.test.ts:1:1)

Test Suites: 1 failed, 1 total Tests: 0 total Snapshots: 0 total Time: 1.109 s Ran all test suites.

brettimus commented 2 weeks ago

can test the fix by using 0.2.1-beta.1 of the client library

flenter commented 1 week ago

You're right this does annoy me. :) As I really feel we're fixing this the wrong way, but if this works... 👍