Unable to test middleware with cucumber-js

[8byr0]

Verify canary release

• I verified that the issue exists in Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 21.3.0: Wed Jan  5 21:37:58 PST 2022; root:xnu-8019.80.24~20/RELEASE_ARM64_T6000
Binaries:
  Node: 14.18.2
  npm: 6.14.15
  Yarn: 1.22.17
  pnpm: N/A
Relevant packages:
  next: 12.1.0
  react: 17.0.2
  react-dom: 17.0.2

What browser are you using? (if relevant)

N/A

How are you deploying your application? (if relevant)

N/A

Describe the Bug

When trying to test _middleware.ts with Cucumber (https://github.com/cucumber/cucumber-js),
I'm unable to import { NextResponse } from 'next/server' without throwing an error SyntaxError: Unexpected token 'export' because next/server uses export { NextRequest } in line 1.

Expected Behavior

I would like to be able to test my _middleware.ts authentication methodology.

To Reproduce

1. Create a Next app with the aforementioned versions.
2. Create a _middleware.ts
3. Create a test for it in Cucumber.
4. Try to import NextResponse from next/server.
5. Run tests.
6. Get error.

[8byr0]

First, all credits for this issue go to davidrhoderick who reported the same issue #32848 when running tests with jest.

The problem described in the original issue is the same that occurs with cucumber-js so I'd like to share here a solution to make it work. This solution is for:

• you, coming from google and looking for a fix
• future me, forgetting I already fixed this a few months ago (hi you!)

Let's get started; If you use cucumber (or any other tool like nyc), the issue you'll face is that:

• next/server/middleware is written (and published) using es6 syntax
• Your tests run in a node environment which only accept commonjs syntax
• Since the default behavior is to not transpile packages under node_modules, you'll get TypeError or other compilation failures.

Solution

Here's how to make it work:

Configure cucumber

// cucumber.js

const defaults = [
    '--require cucumber.setup.js',
    '--require cucumber/runner.js',
  
    // Test files
    '--require __tests__/**/**/*.spec.ts',
    '--require __tests__/**/**/*.spec.tsx',
    '--require src/**/**__tests__/**/**/*.spec.ts',
    '--require src/**/**__tests__/**/**/*.spec.tsx',

    // Features
    '**/**__tests__/**/**features/**/*.feature',

    // Additional args
    '--publish-quiet',
  ].join(' ');
  
  module.exports = {
    ci: `
    --world-parameters '{"ci": "true"}'
    ${defaults}
    --exit
    `,
    default: `
    ${defaults}
    `,
  };

// cucumber.setup.js

// This prevents `Request is not defined` error
require("isomorphic-fetch");

const ignoredModules = ["next/server"].join("|");

require("ts-node").register({
  transpileOnly: true,
  ignore: [`node_modules/(?!${ignoredModules})`],
  // Do not add custom tsconfig here, it is managed under root tsconfig.json
});

require("tsconfig-paths").register();

// If you're testing components
require("jsdom-global/register");

Configure TypeScript

// tsconfig.json
{
    "ts-node": {
        "compilerOptions": {
            // ...
            "module": "commonjs",
            "jsx": "react-jsx", // override jsx for ts-node
            "allowJs": true
            // ...
        }
    },
    "compilerOptions": {
        // ...
        "jsx": "preserve" // required by NextJS: will be automatically updated if you use another value
        //...
    },
    // ...
}

Run

Then you can run cucumber

yarn run cucumber-js # will automatically use your cucumber.js file for setup

[balazsorban44]

Closing as the proposed setup should work, and the issue is not with Next.js. Another solution would be to make the test environment ESM compatible, although not being familiar with Cucumber.js I'm not sure it's possible. #32848 relies on next/jest which we author, so we can look into that issue. 👍

[8byr0]

Yes you're right, it's not in next scope.
But since it's the same error as the one when using jest, I just wanted to share a solution for others in same situation. (Consider this an SEO friendly issue 🙃)

[balazsorban44]

Thanks for sharing. FWIW, we are already working on the next/jest side.

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.