Docs: Correct JavaScript React Component File Extension to .jsx in '01-vitest.mdx'

[sogoagain]

Hello,

This PR resolves a file extension inconsistency in the 'Setting up Vitest with Next.js' section of the Next.js documentation (01-vitest.mdx).

When using next.js with JavaScript, following the documentation(01-vitest.mdx) leads to issues during testing because of the jsx extension.

This PR corrects an example code that wrongly uses a '.js' extension for a React component, which is against Vitest's requirement for '.jsx' extensions.

• Allow JSX in .js files vitest-dev/vitest#1564

Thank you.

[samcx]

@sogoagain The config file isn't a React component → https://vitest.dev/config/#configuration (all the examples are using .ts, not .tsx).

[sogoagain]

@samcx Oops, sorry. I should have edited the app/page.js file, but I mistakenly altered the wrong one. I've corrected the PR now. My apologies for the confusion. Please review again.
Thank you.

[samcx]

@sogoagain Thank you for the update!

Although I would agree using .jsx is more semantic, I believe all our JavaScript examples are simply using .js for the React components, which is fine for now!

• Ref: Convert create-next-app template .js files to .jsx #60392

[sogoagain]

@samcx Yes, I agree it's fine to use the .js extension for React components.

But the problem is, when I try to configure the vitest environment using next.js in Javascript, if I follow the documentation, I get an error when running the test due to the .js extension. This is a fix for that.

In fact, in the Typescript example code, it is written as app.page.tsx.

[samcx]

@sogoagain Can you share the error as well and your Vite versions? This may be solely a Vite thing, which if true, it may be best to just switch this to .jsx.

[sogoagain]

@samcx

Sure. The error details are as follows.

 FAIL  __tests__/page.test.jsx [ __tests__/page.test.jsx ]
Error: Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension.
 ❯ formatError node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:63768:46
 ❯ TransformContext.error node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:63762:19
 ❯ TransformContext.transform node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:61979:22
 ❯ Object.transform node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:64063:30
 ❯ loadAndTransform node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:49741:29

The version of vitest is '1.2.1'.

Thank you.

[ijjk]

Allow CI Workflow Run

• approve CI run for commit: 02f1d24

Note: this should only be enabled once the PR is ready to go and can only be enabled by a maintainer

[samcx]