Repository: next.js
Issue: nextjs/TypeScript with Jest: "SyntaxError: Cannot use import statement outside a module" for some packages
Labels: examples

### Verify canary release

- [X] I verified that the issue exists in the latest Next.js canary release

### Provide environment information

```bash
Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.1.0: Mon Oct  9 21:28:12 PDT 2023; root:xnu-10002.41.9~6/RELEASE_ARM64_T8103
Binaries:
  Node: 21.1.0
  npm: 10.2.0
  Yarn: 1.22.19
  pnpm: N/A
Relevant Packages:
  next: 14.0.4-canary.5
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.2.2
Next.js Config:
  output: N/A
```
```


### Which example does this report relate to?

https://github.com/vercel/next.js/tree/canary/examples/with-jest

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

_No response_

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

_No response_

### Describe the Bug

I am using next.js with TypeScript and try to use jest for running tests. When importing some packages, such as `chalk` or `ora` I get the following error when running jest.

```bash
npx jest
(node:27468) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
 PASS  __tests__/index.test.tsx
 PASS  app/component.test.tsx
 PASS  app/rsc/page.test.tsx
 PASS  app/blog/[slug]/page.test.tsx
 PASS  __tests__/snapshot.tsx
 FAIL  app/client/page.test.tsx
  ● 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:

    /Users/erikmuttersbach/Projects/home-assistant-openai-nextjs/with-jest-app/node_modules/chalk/source/index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import ansiStyles from '#ansi-styles';
                                                                                      ^^^^^^

    SyntaxError: Cannot use import statement outside a module

       8 | it('App Router: Works with Client Components', () => {
       9 |   console.log(chalk.blue('Client Component Test'))
    > 10 |   render(<ClientComponent />)
         |                                                       ^
      11 |   expect(screen.getByRole('heading')).toHaveTextContent('Client Component')
      12 | })
      13 |

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1505:14)
      at Object.<anonymous> (app/client/page.test.tsx:10:55)

Test Suites: 1 failed, 5 passed, 6 total
Tests:       5 passed, 5 total
Snapshots:   1 passed, 1 total
Time:        0.842 s, estimated 1 s
Ran all test suites.
```

### Expected Behavior

Using the same packages for running the application works. I was expecting jest to behave the same

### To Reproduce

Start with a clean setup:
```bash
nvm use 21.1 
npx create-next-app --example with-jest with-jest-app
cd with-jest-app/
npm install next@canary
npx jest # still works!
``` 

Introduce breaking changes:
```bash
npm install chalk 
```
Edit `app/client/page.test.tsx` (or any other test file) and use chalk:
```ts
/**
 * @jest-environment jsdom
 */
import { render, screen } from '@testing-library/react'
import ClientComponent from './page'
import chalk from 'chalk'

it('App Router: Works with Client Components', () => {
  console.log(chalk.blue('Client Component Test'))
  render(<ClientComponent />)
  expect(screen.getByRole('heading')).toHaveTextContent('Client Component')
})
```

Now `npx jest` fails:
```bash
npx jest
(node:27468) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
 PASS  __tests__/index.test.tsx
 PASS  app/component.test.tsx
 PASS  app/rsc/page.test.tsx
 PASS  app/blog/[slug]/page.test.tsx
 PASS  __tests__/snapshot.tsx
 FAIL  app/client/page.test.tsx
  ● 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:

    /Users/erikmuttersbach/Projects/home-assistant-openai-nextjs/with-jest-app/node_modules/chalk/source/index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import ansiStyles from '#ansi-styles';
                                                                                      ^^^^^^

    SyntaxError: Cannot use import statement outside a module

       8 | it('App Router: Works with Client Components', () => {
       9 |   console.log(chalk.blue('Client Component Test'))
    > 10 |   render(<ClientComponent />)
         |                                                       ^
      11 |   expect(screen.getByRole('heading')).toHaveTextContent('Client Component')
      12 | })
      13 |

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1505:14)
      at Object.<anonymous> (app/client/page.test.tsx:10:55)

Test Suites: 1 failed, 5 passed, 6 total
Tests:       5 passed, 5 total
Snapshots:   1 passed, 1 total
Time:        0.842 s, estimated 1 s
Ran all test suites.
```