Next.js 12.1 SWC + Relay + Jest not transpiling `graphql` tags

Verify canary release

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

Provide environment information

Next 12.1

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

Thank you for porting the relay-babel plugin to SWC! One issue i’m now running into is that my graphql tags in jest test files are not being automatically transpiled, leading to this error:

 Invariant Violation: graphql: Unexpected invocation at runtime. Either the Babel transform was not set up, or it failed to identify this call site. Make sure it is being used verbatim as `graphql`. Note also that there cannot be a space between graphql and the backtick that follows.

       8 | const { renderWithRelay } = setupTestWrapper({
       9 |   Component: ArtistName,
    > 10 |   query: graphql`

Expected Behavior

I would expect that the same transforms applied to Next js app source code would also automatically be applied to tests.

In another post, it looks like a dev is switching back to babel-jest in tests in order to compile these bits as a work around.

To Reproduce

Setup automatic next.js jest support.

Then enable Relay compiler support in Next.js config:

const nextConfig = {
  compiler: {
    relay: {
      src: "...",
      artifactDirectory: "...",
      language: "typescript",
    },
  },
}

module.exports = nextConfig

Write a test that includes the graphql tag, then run test.

[timneutkens]

@wonu thanks for having a look at this 👏 I’ve opened a PR that adds pagesDir to the transformer: #36599

[wonu]

Let me share my research.

Before v12.1.6-canary.13, js files were transformed, if using swc, in two ways (details are omitted):

• through jest-transformer.js

  • swc/index.js::transformSync()
  • transform.rs::transform_sync()
  • transform.rs::exec_transform()

• through next-swc-loader.js

  • swc/index.js::transform()
  • transform.rs::transform()
  • transform.rs::schedule_transform()
  • lib.rs::custom_before_pass()
  • relay.rs (`graphql` TaggedTemplates is checked here)

I can’t read Rust code, so don’t know what is the difference between transform() and transform_sync(). But the problem was there: jest-transformer.js didn’t invoke relay.rs.

Now things have changed. Since v12.1.6-canary.13, the exec_transform() has been removed and the two transformations are both using schedule_transform(), which means jest-transformer.js may work as expected.

However there is another problem: relay.rs requires pages_dir parameter (see #33918).

next-swc-loader.js sets pagesDir using get-project-dir.ts, so it is okay.

But jest-transformer.js not sets pagesDir and it even cannot simply use get-project-dir.ts:

• get-project-dir.ts has been depending on next.ts since #34836, so just importing get-project-dir.ts starts dev(default command) server, which is an unexpected side effect.
• getProjectDir() needs dir parameter passed in <dir> argument in cli commands. If passing in <dir> explicitly in cli, there’s no way to tell jest-transformer.js what <dir> is.

It is not smooth, but adding pagesDir parameter lets `graphql` be processed correctly with Jest anyway. And it’s just an experiment like POC, so don’t try this at work 😃

Hope this helps you understand what’s going on behind the scenes.