[メモ] Subscriptions in Apollo Server の構築で躓いた点＆解決履歴（流れでESM対応＋Prisma UT）

  "dependencies": {
    "@graphql-tools/graphql-file-loader": "^7.5.3",
    "@graphql-tools/load": "^7.7.5",
    "@graphql-tools/schema": "^9.0.2",
    "@prisma/client": "^4.3.1",
    "apollo-server": "^3.10.2",
    "apollo-server-core": "^3.10.2",
    "bcrypt": "^5.0.1",
    "graphql": "^16.6.0",
    "graphql-subscriptions": "^2.0.0",
    "graphql-ws": "^5.10.1",
    "jsonwebtoken": "^8.5.1",
    "ws": "^8.8.1"
  },

{
  "compilerOptions": {
    "allowUnreachableCode": false,
    "allowUnusedLabels": false,
    "declaration": true,
    "forceConsistentCasingInFileNames": true,
    "lib": ["es2018"],
    "module": "commonjs",
    "noEmitOnError": true,
    "noFallthroughCasesInSwitch": true,
    "noImplicitReturns": true,
    "pretty": true,
    "sourceMap": true,
    "strict": true,
    "target": "es2018"
  },
  "exclude": [
    "node_modules"
  ]
}

import { ApolloServer } from 'apollo-server-express';
import { createServer } from 'http';
import express from 'express';
import { ApolloServerPluginDrainHttpServer } from "apollo-server-core";
import { makeExecutableSchema } from '@graphql-tools/schema';
import { WebSocketServer } from 'ws';
import { useServer } from 'graphql-ws/lib/use/ws';
import resolvers from './resolvers';
import typeDefs from './typeDefs';

// Create the schema, which will be used separately by ApolloServer and
// the WebSocket server.
const schema = makeExecutableSchema({ typeDefs, resolvers });

// Create an Express app and HTTP server; we will attach both the WebSocket
// server and the ApolloServer to this HTTP server.
const app = express();
const httpServer = createServer(app);

// Create our WebSocket server using the HTTP server we just set up.
const wsServer = new WebSocketServer({
  server: httpServer,
  path: '/graphql',
});
// Save the returned server's info so we can shutdown this server later
const serverCleanup = useServer({ schema }, wsServer);

// Set up ApolloServer.
const server = new ApolloServer({
  schema,
  csrfPrevention: true,
  cache: "bounded",
  plugins: [
    // Proper shutdown for the HTTP server.
    ApolloServerPluginDrainHttpServer({ httpServer }),

    // Proper shutdown for the WebSocket server.
    {
      async serverWillStart() {
        return {
          async drainServer() {
            await serverCleanup.dispose();
          },
        };
      },
    },
    ApolloServerPluginLandingPageLocalDefault({ embed: true }),
  ],
});
await server.start();
server.applyMiddleware({ app });

const PORT = 4000;
// Now that our HTTP server is fully set up, we can listen to it.
httpServer.listen(PORT, () => {
  console.log(
    `Server is now running on http://localhost:${PORT}${server.graphqlPath}`,
  );
});

server.applyMiddleware({ app });

  public override applyMiddleware() {
    throw new Error(
      'To use Apollo Server with an existing express application, please use apollo-server-express',
    );
  }

import { ApolloServer } from 'apollo-server';

import { ApolloServer } from 'apollo-server-express';

await server.start();

{
  "extends": "./node_modules/gts/tsconfig-google.json",
  "compilerOptions": {
    "rootDir": ".",
    "outDir": "build",
    "module": "es2022"  // ここを追加
  },
  "include": ["src/**/*.ts", "test/**/*.ts"]
}

$ npm run dev

> backend@1.0.0 dev
> ts-node-dev --respawn src/index.ts
Compilation error in D:\dev_git\GraphQL-practices\graphql-hacker-news-clone\backend\src\index.ts

[ERROR] 01:10:21 ⨯ Unable to compile TypeScript:
src/index.ts(1,33): error TS2792: Cannot find module '@graphql-tools/graphql-file-loader'. Did you mean to set the 'moduleResolution' option to 'node', or to add aliases to the 'paths' option?
  : 
// 多いので省略

{
  "extends": "./node_modules/gts/tsconfig-google.json",
  "compilerOptions": {
    "rootDir": ".",
    "outDir": "build",
    "module": "es2022",
    "moduleResolution": "node"  // ここを追加
  },
  "include": ["src/**/*.ts", "test/**/*.ts"]
}

(node:33888) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
<project full path>\backend\src\index.ts:1
import { GraphQLFileLoader } from '@graphql-tools/graphql-file-loader';
^^^^^^

SyntaxError: Cannot use import statement outside a module
  : (stack trace は省略

Error: Must use import to load ES Module: <project full path>\backend\src\index.ts

{
  "extends": "./node_modules/gts/tsconfig-google.json",
  "compilerOptions": {
    "rootDir": ".",
    "outDir": "build",
    "module": "NodeNext",
  },
  "include": ["src/**/*.ts", "test/**/*.ts"],
}

  "scripts": {
    "dev": "ts-node-dev --respawn src/index.ts",

  "scripts": {
    "dev": "ts-node --esm src/index.ts",

    "@types/jest": "^29.0.0",
    "jest": "^28.1.3",
    "jest-mock-extended": "^2.0.7",
    "prisma": "^4.3.1",
    "ts-jest": "^28.0.8",

$ npx jest
ReferenceError: module is not defined in ES module scope
This file is being treated as an ES module because it has a '.js' file extension and 'D:\dev_git\GraphQL-practices\graphql-hacker-news-clone\backend\package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
    at file:///D:/dev_git/GraphQL-practices/graphql-hacker-news-clone/backend/jest.config.js:2:1
    at ModuleJob.run (node:internal/modules/esm/module_job:198:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:385:24)
    at async importModuleDynamicallyWrapper (node:internal/vm/module:437:15)
    at async requireOrImportModule (D:\dev_git\GraphQL-practices\graphql-hacker-news-clone\backend\node_modules\jest-config\node_modules\jest-util\build\requireOrImportModule.js:65:32)
    at async readConfigFileAndSetRootDir (D:\dev_git\GraphQL-practices\graphql-hacker-news-clone\backend\node_modules\jest-config\build\readConfigFileAndSetRootDir.js:132:22)
    at async readConfig (D:\dev_git\GraphQL-practices\graphql-hacker-news-clone\backend\node_modules\jest-config\build\index.js:216:18)
    at async readConfigs (D:\dev_git\GraphQL-practices\graphql-hacker-news-clone\backend\node_modules\jest-config\build\index.js:404:26)
    at async runCLI (D:\dev_git\GraphQL-practices\graphql-hacker-news-clone\backend\node_modules\@jest\core\build\cli\index.js:140:59)

export default {
  preset: "ts-jest/presets/default-esm",
  globals: {
    "ts-jest": {
      useESM: true,
    },
  },
}

$ npx jest
ts-jest[config] (WARN) message TS151001: If you have issues related to imports, you should consider setting `esModuleInterop` to `true` in your TypeScript configuration file (usually `tsconfig.json`). See https://blogs.msdn.microsoft.com/typescript/2018/01/31/announcing-typescript-2-7/#easier-ecmascript-module-interoperability for more information.
 FAIL  test/prisma.test.ts
  ● Test suite failed to run
                                                                                                                                                    
    Cannot find module '../lib/prisma.js' from 'test/prisma.test.ts'

      1 | import {describe, expect, test} from '@jest/globals';
    > 2 | import prisma from '../lib/prisma.js'
        | ^
      3 | import { prismaMock } from './singleton.js'
      4 |
      5 | interface CreateUser {

      at Resolver._throwModNotFoundError (node_modules/jest-resolve/build/resolver.js:491:11)
      at Object.<anonymous> (test/prisma.test.ts:2:1)

<rootDir>
 |- src
     |- lib
         |- prisma.ts  // PrismaClient のインスタンスを export default するだけ 
     |- test
         |- singleton.ts  // prismaのドキュメントからのコピペ
         |- prisma.test.ts  // prismaのドキュメントのテストコードのコピペ

  moduleNameMapper: {
    '^(\\.{1,2}/.*)\\.js$': '$1'
  },

$ npx jest
ts-jest[config] (WARN) message TS151001: If you have issues related to imports, you should consider setting `esModuleInterop` to `true` in your TypeScript configuration file (usually `tsconfig.json`). See https://blogs.msdn.microsoft.com/typescript/2018/01/31/announcing-typescript-2-7/#easier-ecmascript-module-interoperability for more information.
 FAIL  src/test/prisma.test.ts
  prisma test
    × should create new user  (33 ms)                                                                                                               
    √ should update a users name  (194 ms)                                                                                                          
                                                                                                                                                    
  ● prisma test › should create new user                                                                                                            
                                                                                                                                                    
    expect(received).resolves.toEqual()

    Received promise rejected instead of resolved
    Rejected to value: [Error:·
    Invalid `prisma.user.create()` invocation in
    D:\dev_git\GraphQL-practices\graphql-hacker-news-clone\backend\src\test\prisma.test.ts:13:28·
      10 }
      11·
      12 export async function createUser(user: CreateUser) {
    → 13   return await prisma.user.create(
    Unique constraint failed on the fields: (`id`)]

      40 |     prismaMock.user.create.mockResolvedValue(user)
      41 |
    > 42 |     await expect(createUser(user)).resolves.toEqual({
         |                 ^
      43 |       id: 1,
      44 |       name: 'Rich',
      45 |       email: 'hello@prisma.io',

      at expect (node_modules/@jest/expect/node_modules/expect/build/index.js:128:15)
      at Object.<anonymous> (src/test/prisma.test.ts:42:17)

  setupFilesAfterEnv: [
    './src/test/singleton.ts'
  ]