DEV Community

Sean Atukorala
Sean Atukorala

Posted on

3 3

[Solved] SyntaxError: Unexpected token '.' Jest Error for Next.js Apps

Problem:

Running into the following error when trying to run unit tests for a Next.js application using the jest command:

({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){.container {
                                                                                      ^

    SyntaxError: Unexpected token '.'

      2 | import Image from 'next/image'
      3 |
    > 4 | import styles from '@/pages/index.module.css'
        |                                              ^
      5 |
      6 | export default function Home() {
      7 |   return (

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1773:14)
      at Object.<anonymous> (pages/index.tsx:4:46)
Enter fullscreen mode Exit fullscreen mode

Solution:

This error could be caused by a number of issues and is related to Jest wanting to process CommonJS code. But it is unable to process .css files for some reason and therefore throws this error.

Here is a potential solution that worked for me:

  1. Include the following line: '\\.css$': '<rootDir>/emptyModule.js', in your jest.config.js file
  2. Create a file named emptyModule.js in the root directory of your application

Here is my full jest.config.js file just for extra reference:

// Add any custom config to be passed to Jest
const customJestConfig = {
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  moduleNameMapper: {
    // Handle module aliases (this will be automatically configured for you soon)
    '^@/components/(.*)$': '<rootDir>/components/$1',
    '\\.css$': '<rootDir>/emptyModule.js',
    '^@/pages/(.*)$': '<rootDir>/pages/$1',
  },
  testEnvironment: 'jest-environment-jsdom',
}

// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
module.exports = createJestConfig(customJestConfig)

Enter fullscreen mode Exit fullscreen mode

Hopefully, this solves your issue. If not, keep looking for solutions, you'll come across one that works!

Conclusion:

Thanks for reading this blog post!

If you have any questions or concerns please feel free to post a comment in this post and I will get back to you when I find the time.

If you found this article helpful please share it and make sure to follow me on Twitter and GitHub, connect with me on LinkedIn and subscribe to my YouTube channel.

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay