Repository: next.js
Issue: Jest config with "next/jest" not picking up "babel-plugin-formatjs" on v. 12.1.6/12.1.7-canary.40
Labels: bug

### Verify canary release

- [X] 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.5.0: Tue Apr 26 21:08:29 PDT 2022; root:xnu-8020.121.3~4/RELEASE_ARM64_T8101
Binaries:
  Node: 16.14.2
  npm: 8.5.0
  Yarn: 1.22.11
  pnpm: N/A
Relevant packages:
  next: 12.1.7-canary.40
  react: 18.2.0
  react-dom: 18.2.0
```

### What browser are you using? (if relevant)

_No response_

### How are you deploying your application? (if relevant)

_No response_

### Describe the Bug

Trying to add the [babel-plugin-formatjs](https://formatjs.io/docs/tooling/babel-plugin/) plugin to Jest testing environment. It automatically injects hash generated IDs for translations. This works on `12.1.0` but with newer releases I only get non-specific error message when I run `yarn test`:

```
 FAIL  test/index.test.tsx
  ✕ renders (41 ms)

  ● renders

    [@formatjs/intl] An `id` must be provided to format a message. You can either:
    1. Configure your build toolchain with [babel-plugin-formatjs](https://formatjs.io/docs/tooling/babel-plugin)
    or [@formatjs/ts-transformer](https://formatjs.io/docs/tooling/ts-transformer) OR
    2. Configure your `eslint` config to include [eslint-plugin-formatjs](https://formatjs.io/docs/tooling/linter#enforce-id)
    to autofix this issue

      11 |     <div className={styles.container}>
      12 |       <Head>
    > 13 |         <title>{intl.formatMessage({ defaultMessage: 'Create Next App' })}</title>
```

My configuration:

.babelrc:

```json
{
  "presets": ["next/babel"],
  "plugins": ["formatjs"]
}
```

jest.config.js:

```js
const nextJest = require('next/jest');
const createJestConfig = nextJest({ dir: './' });

const customJestConfig = {
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  moduleDirectories: ['node_modules', '<rootDir>/'],
  testEnvironment: 'jest-environment-jsdom',
  moduleNameMapper: {
    '^@components/(.*)$': '<rootDir>/components/$1',
    '^@containers/(.*)$': '<rootDir>/containers/$1',
    '^@lib/(.*)$': '<rootDir>/lib/$1',
  },
  transform: {
    // 
    // THIS WORKS ON NEXT 12.1.0:
    //
    // Use babel-jest to transpile tests with the next/babel preset (ELSE test will FAIL due to missing ID)
    // https://jestjs.io/docs/configuration#transform-objectstring-pathtotransformer--pathtotransformer-object
    '^.+\\.(js|jsx|ts|tsx)$': ['babel-jest', { presets: ['next/babel'] }],
  },
};

// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
module.exports = createJestConfig(customJestConfig);
```

jest.setup.js:

```js
import '@testing-library/jest-dom/extend-expect';
```

Installed dependencies:
```
{
"dependencies": {
    "next": "12.1.7-canary.40",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-intl": "^6.0.4"
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@types/node": "18.0.0",
    "@types/react": "18.0.13",
    "@types/react-dom": "18.0.5",
    "babel-jest": "^28.1.1",
    "babel-plugin-formatjs": "^10.3.24",
    "eslint": "8.17.0",
    "eslint-config-next": "12.1.6",
    "git18n": "^1.0.4",
    "jest": "^28.1.1",
    "jest-environment-jsdom": "^28.1.1",
    "typescript": "4.7.3"
  }
}
```

I am unsure which direction to look in. Has Next changed how it load Jest configuration/Babel plugins?



### Expected Behavior

It should load the `babel-plugin-formatjs` as previously.


### To Reproduce

Install the package and run `yarn test`:

```
{
  "name": "next-hash-ids",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "yarn git18n && next build",
    "start": "next start",
    "lint": "next lint",
    "translate": "git18n --files '(pages|components)/**/*.{js,jsx,ts,tsx}'",
    "test": "jest",
    "test:staged": "jest --bail --findRelatedTests",
    "test-watch": "jest --watchAll",
    "test-coverage": "jest --coverage"
  },
  "dependencies": {
    "next": "12.1.7-canary.40",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-intl": "^6.0.4"
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@types/node": "18.0.0",
    "@types/react": "18.0.13",
    "@types/react-dom": "18.0.5",
    "babel-jest": "^28.1.1",
    "babel-plugin-formatjs": "^10.3.24",
    "eslint": "8.17.0",
    "eslint-config-next": "12.1.6",
    "git18n": "^1.0.4",
    "jest": "^28.1.1",
    "jest-environment-jsdom": "^28.1.1",
    "typescript": "4.7.3"
  }
}

```