Add pagesDir to Jest transformer (#36599)

Fixes #35469

Adds `pagesDir` which is required for the Relay transform.

Added a test case based on https://github.com/hanford/relay-swc-jest.



## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes by running `yarn lint`


Co-authored-by: JJ Kasper <[email protected]>

Author: timneutkens

packages/next/build/jest/jest.ts

@@ -4,6 +4,7 @@ import loadConfig from '../../server/config'
 import { PHASE_TEST } from '../../shared/lib/constants'
 import loadJsConfig from '../load-jsconfig'
 import * as Log from '../output/log'
+import { findPagesDir } from '../../lib/find-pages-dir'
 
 async function getConfig(dir: string) {
   const conf = await loadConfig(PHASE_TEST, dir)
@@ -50,8 +51,11 @@ export default function nextJest(options: { dir?: string } = {}) {
       let jsConfig
       let resolvedBaseUrl
       let isEsmProject = false
+      let pagesDir
+
       if (options.dir) {
         const resolvedDir = resolve(options.dir)
+        pagesDir = findPagesDir(resolvedDir)
         const packageConfig = loadClosestPackageJson(resolvedDir)
         isEsmProject = packageConfig.type === 'module'
 
@@ -108,6 +112,7 @@ export default function nextJest(options: { dir?: string } = {}) {
               jsConfig,
               resolvedBaseUrl,
               isEsmProject,
+              pagesDir,
             },
           ],
           // Allow for appending/overriding the default transforms

packages/next/build/swc/jest-transformer.js

@@ -47,6 +47,7 @@ module.exports = {
         nextConfig: inputOptions.nextConfig,
         jsConfig: inputOptions.jsConfig,
         resolvedBaseUrl: inputOptions.resolvedBaseUrl,
+        pagesDir: inputOptions.pagesDir,
         esm:
           isSupportEsm &&
           isEsm(Boolean(inputOptions.isEsmProject), filename, jestConfig),

packages/next/build/swc/options.js

@@ -145,6 +145,7 @@ export function getJestSWCOptions({
   esm,
   nextConfig,
   jsConfig,
+  pagesDir,
   // This is not passed yet as "paths" resolving needs a test first
   // resolvedBaseUrl,
 }) {
@@ -174,6 +175,7 @@ export function getJestSWCOptions({
     },
     disableNextSsg: true,
     disablePageConfig: true,
+    pagesDir,
   }
 }
 

test/lib/e2e-utils.ts

@@ -7,7 +7,7 @@ import { NextStartInstance } from './next-modes/next-start'
 import { NextDeployInstance } from './next-modes/next-deploy'
 
 // increase timeout to account for yarn install time
-jest.setTimeout((process.platform === 'win32' ? 240 : 180) * 1000)
+jest.setTimeout(240 * 1000)
 
 const testsFolder = path.join(__dirname, '..')
 

test/production/next/jest/index.test.ts renamed to test/production/jest/index.test.ts

@@ -5,6 +5,12 @@ import { renderViaHTTP } from 'next-test-utils'
 describe('next/jest', () => {
   let next: NextInstance
 
+  if (process.env.NEXT_TEST_REACT_VERSION === '^17') {
+    // react testing library is specific to react version
+    it('should bail on react v17', () => {})
+    return
+  }
+
   beforeAll(async () => {
     next = await createNext({
       files: {

test/production/jest/relay/app/components/environment.tsx

@@ -0,0 +1,23 @@
+import { Environment, Network, RecordSource, Store } from 'relay-runtime'
+
+async function fetchGraphQL(text, variables) {
+  return new Promise((next) => {
+    const res = () => {
+      return next({ data: { viewer: { user: { id: '123', name: 'Foo' } } } })
+    }
+
+    setTimeout(res, 1000)
+  })
+}
+
+// Relay passes a "params" object with the query name and text. So we define a helper function
+// to call our fetchGraphQL utility with params.text.
+async function fetchRelay(params, variables) {
+  return await fetchGraphQL(params.text, variables)
+}
+
+// Export a singleton instance of Relay Environment configured with our network function:
+export default new Environment({
+  network: Network.create(fetchRelay),
+  store: new Store(new RecordSource()),
+})

test/production/jest/relay/app/jest.config.js

@@ -0,0 +1,20 @@
+const nextJest = require('next/jest')
+
+const createJestConfig = nextJest({
+  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
+  dir: './',
+})
+
+// Add any custom config to be passed to Jest
+const customJestConfig = {
+  // if using TypeScript with a baseUrl set to the root directory then you need the below for alias' to work
+  moduleDirectories: ['node_modules', '<rootDir>/'],
+  testEnvironment: 'jest-environment-jsdom',
+  moduleNameMapper: {
+    // When changing these, also look at the tsconfig!
+    '^types/(.+)$': '<rootDir>/types/$1',
+  },
+}
+
+// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
+module.exports = createJestConfig(customJestConfig)

test/production/jest/relay/app/main.graphql

@@ -0,0 +1,19 @@
+type Query {
+  viewer(after: String, before: String, first: Int, last: Int): Viewer!
+  node(id: ID!): Node
+}
+
+type Viewer implements Node {
+  id: ID!
+  user: User!
+}
+
+interface Node {
+  id: ID!
+}
+
+type User implements Node {
+  id: ID!
+  name: String!
+  title: String!
+}

test/production/jest/relay/app/next.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+  compiler: {
+    relay: {
+      src: './',
+      artifactDirectory: './types',
+      language: 'typescript',
+    },
+  },
+}

test/production/jest/relay/app/pages/_app.tsx

@@ -0,0 +1,10 @@
+import { RelayEnvironmentProvider } from 'react-relay/hooks'
+import RelayEnvironment from '../components/environment'
+
+export default function MyApp({ Component, pageProps }) {
+  return (
+    <RelayEnvironmentProvider environment={RelayEnvironment}>
+      <Component {...pageProps} />
+    </RelayEnvironmentProvider>
+  )
+}