Jest encountered an unexpected token error while running tests in NextJS 14
Answered
Asiatic Lion posted this in #help-forum
Asiatic LionOP
I have a problem running Jest unit tests in NextJS 14. I am using typescript and the app router. I have attached screenshots with my package.json, the output in my terminal after running the tests, jest.config.ts. How can I resolve this bug?
Answered by Sun bear
you're using ts-jest so make sure the tsconfig it's configured to use is set up to support jsx
12 Replies
Asiatic LionOP
I really need help with this. Can anyone help me
Asiatic LionOP
It seems no one has run into this before
Sun bear
looks like your jest setup isnt configured to transform JSX syntax
Sun bear
you're using ts-jest so make sure the tsconfig it's configured to use is set up to support jsx
Answer
Asiatic LionOP
Okay let me try that
Thanks
@Sun bear looks like your jest setup isnt configured to transform JSX syntax
Asiatic LionOP
My ts config is here
{
"compilerOptions": {
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"plugins": [
{
"name": "next"
}
],
"paths": {
"@/": ["./src/"]
}
},
"include": ["next-env.d.ts", "/*.ts", "/.tsx", ".next/types/**/.ts"],
"exclude": ["node_modules"]
}
Above I've shared my tsconfig.json. I'm new to testing and I'm wondering what to change. Can you please point me to some resources that I can use configure the test environment.
{
"compilerOptions": {
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"plugins": [
{
"name": "next"
}
],
"paths": {
"@/": ["./src/"]
}
},
"include": ["next-env.d.ts", "/*.ts", "/.tsx", ".next/types/**/.ts"],
"exclude": ["node_modules"]
}
Above I've shared my tsconfig.json. I'm new to testing and I'm wondering what to change. Can you please point me to some resources that I can use configure the test environment.
Sun bear
I think you want "jsx" set to "react"
https://www.typescriptlang.org/docs/handbook/jsx.html#basic-usage
https://www.typescriptlang.org/docs/handbook/jsx.html#basic-usage
actually that might break other things since I think next expects it to be set to "preserve"
did you try following the setup guide here
https://nextjs.org/docs/app/building-your-application/testing/jest
https://nextjs.org/docs/app/building-your-application/testing/jest
Asiatic LionOP
Yes I did. It works fine now
Solved