Enabling `@graphql-codegen/client-preset-swc-plugin` makes Jest throw SyntaxError when trying to run unit tests

bvobart commented 1 year ago

Which packages are impacted by your issue?

@graphql-codegen/client-preset
@graphql-codegen/client-preset-swc-plugin

Describe the bug

When I enable @graphql-codegen/client-preset-swc-plugin in my NodeJS project, Jest fails to run any tests I create for it due to a SyntaxError: Malformed arrow function parameter list. Disabling the plugin (simply removing .swcrc or removing jsc.experimental.plugins from the .swcrc) or removing the transform property from Jest, makes the test run as expected.

Your Example Website or App

https://github.com/bvobart/gql-client-preset-swc-jest-issue

Steps to Reproduce the Bug or Issue

git clone git@github.com:bvobart/gql-client-preset-swc-jest-issue.git
cd gql-client-preset-swc-jest-issue
yarn
yarn jest issue.test.ts

The ReadMe of the MRE repo also contain these instructions.

Expected behavior

I'm expecting the test to fail because 1+1 is 2 not 3 like the test asserts, but instead, Jest fails to run the test due to a SyntaxError:

 FAIL  tests/issue.test.ts
  ● Test suite failed to run

    Jest encountered an unexpected token

    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

    By default "node_modules" folder is ignored by transformers.

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
     • If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/configuration
    For information about custom transformations, see:
    https://jestjs.io/docs/code-transformation

    Details:

    /home/bart/energiebespaarders/random/gql-client-preset-swc-jest-issue/tests/issue.test.ts:2
    describe('something', async *()=>{});
                                ^^

    SyntaxError: Malformed arrow function parameter list

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1495:14)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.369 s, estimated 1 s
Ran all test suites matching /issue.test.ts/i.
error Command failed with exit code 1.

When I remove the transform property from the Jest config, then the test runs as expected (but only because this test contains no TypeScript-specific syntax and is otherwise compatible with Node v16). Alternatively, when I remove the client-preset-swc-plugin from the .swcrc, then the test also runs as expected.

_{P.S. sorry for not forking your MRE repo, I already made my own before making this issue. Still really easy to reproduce though :man_shrugging:}

Screenshots or Videos

No response

Platform

OS: Manjaro Linux
NodeJS: 16.20.0
graphql version: 16.6.0 (latest at the time of writing)

@graphql-codegen/* version(s): Latest at the time of writing.

"@graphql-codegen/cli": "3.3.1",
"@graphql-codegen/client-preset": "3.0.1",
"@graphql-codegen/client-preset-swc-plugin": "0.1.3",

Codegen Config File

import type { CodegenConfig } from '@graphql-codegen/cli';

const config: CodegenConfig = {
  schema: 'https://swapi-graphql.netlify.app/.netlify/functions/index',
  documents: ['./graphql-api/queries/**/*.ts', './graphql-api/mutations/**/*.ts'],
  generates: {
    './graphql-api/__generated__/': {
      preset: 'client',
      plugins: [],
      presetConfig: {
        gqlTagName: 'gql',
      },
    },
  },
  ignoreNoDocuments: true,
};

export default config;

Additional context

jest.config.js:

module.exports = {
  testMatch: undefined, // undefined since testRegex is defined.
  testRegex: '(/__tests__/.*|(\\.|/)test)\\.(js?|ts?)$',
  moduleFileExtensions: ['ts', 'js', 'json', 'node'],
  modulePathIgnorePatterns: ['<rootDir>/.*/__mocks__'],
  transform: {
    '^.+\\.tsx?$': ['@swc/jest'],
  },
};

bvobart commented 1 year ago

@JesseVelden and @YassinEldeeb, from the commit history it seems that you are the authors of @graphql-codegen/client-preset-swc-plugin, do you happen to know more about what is causing this issue?

bvobart commented 1 year ago

Hi @YassinEldeeb and @victorandree, thank you both for #9489 and your patched @victorandree/graphql-codegen-client-preset-swc-plugin NPM package!

This has fixed the original syntax error that I was getting. However, the issue isn't entirely fixed yet. As soon as I import code from another TypeScript file, I get a different syntax error, even though I've updated my example repo to use the patched SWC plugin and I've updated all dependencies to versions that should be compatible (in particular @swc/core is now 1.3.80 to be compatible with swc_core 0.79.x.

Could you look into this again please? :blush:

dotansimha / graphql-code-generator