fix(vercel#36651): disable reactRemoveProperties in jest transform (v…

…ercel#36922)

## Bug

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

Fixes vercel#36651.

Always disable `reactRemoveProperties` in `next/jest` transformation.

packages/next/build/swc/options.js

@@ -105,7 +105,11 @@ function getBaseSWCOptions({
         }
       : null,
     removeConsole: nextConfig?.compiler?.removeConsole,
-    reactRemoveProperties: nextConfig?.compiler?.reactRemoveProperties,
+    // disable "reactRemoveProperties" when "jest" is true
+    // otherwise the setting from next.config.js will be used
+    reactRemoveProperties: jest
+      ? false
+      : nextConfig?.compiler?.reactRemoveProperties,
     modularizeImports: nextConfig?.experimental?.modularizeImports,
     relay: nextConfig?.compiler?.relay,
     emotion: getEmotionOptions(nextConfig, development),

test/production/jest/remove-react-properties/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/remove-react-properties/app/next.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  compiler: {
+    reactRemoveProperties: true,
+  },
+}

test/production/jest/remove-react-properties/app/pages/index.js

@@ -0,0 +1,3 @@
+export default function Index() {
+  return <div data-testid="main-text">Hello World</div>
+}

test/production/jest/remove-react-properties/remove-react-properties-jest.test.ts

@@ -0,0 +1,62 @@
+import { createNext, FileRef } from 'e2e-utils'
+import { NextInstance } from 'test/lib/next-modes/base'
+import { renderViaHTTP } from 'next-test-utils'
+import path from 'path'
+
+const appDir = path.join(__dirname, 'app')
+
+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: {
+        pages: new FileRef(path.join(appDir, 'pages')),
+        'tests/index.test.js': `
+        import { render as renderFn, waitFor } from '@testing-library/react'
+        import '@testing-library/jest-dom/extend-expect';
+
+        import Page from '../pages'
+
+        describe('testid', () => {
+          it('data-testid should be available in the test', async () => {
+            const { getByTestId } = renderFn(
+              <Page />
+            )
+            expect(getByTestId('main-text')).toHaveTextContent('Hello World')
+          })
+        })
+        
+        `,
+        'jest.config.js': new FileRef(path.join(appDir, 'jest.config.js')),
+        'next.config.js': new FileRef(path.join(appDir, 'next.config.js')),
+      },
+      dependencies: {
+        jest: '27.4.7',
+        '@testing-library/react': '^13.1.1',
+        jsdom: '^19.0.0',
+        '@testing-library/jest-dom': '5.16.4',
+      },
+      packageJson: {
+        scripts: {
+          // Runs jest and bails if jest fails
+          build: 'yarn jest --forceExit tests/index.test.js && yarn next build',
+        },
+      },
+      buildCommand: `yarn build`,
+    })
+  })
+  afterAll(() => next.destroy())
+
+  it('data-testid should be removed in production', async () => {
+    const html = await renderViaHTTP(next.appPort, '/')
+
+    expect(html).not.toContain('data-testid')
+  })
+})