How to Resolve 'Cannot use import statement outside a module' Error when Mocking Swiper JS with Jest

Encountering the Cannot use import statement outside a module error while trying to mock Swiper JS using Jest can be a hurdle in your testing process. Below is a solution to tackle this issue:

Encountered Error #

SyntaxError: Cannot use import statement outside a module
Jest encountered an unexpected token

Solution #

To resolve this issue, ensure that you've included necessary imports within your codebase:

// Shomewhere on your code
import 'swiper/css'
import 'swiper/css/navigation'

Then, utilize Jest's mocking functionalities to mock Swiper JS effectively:

jest.mock('swiper/react', () => ({
  Swiper: ({ children }) => children,
  SwiperSlide: ({ children }) => children
}))

jest.mock('swiper/css', () => jest.fn())
jest.mock('swiper/css/navigation', () => jest.fn())
jest.mock('swiper/modules', () => jest.fn())

By incorporating these import statements and employing Jest's mocking capabilities as demonstrated above, you can effectively resolve the Cannot use import statement outside a module error and successfully mock Swiper JS within your Jest testing environment. This allows you to continue testing your codebase without encountering unexpected token errors.

Since you've made it this far, sharing this article on your favorite social media network would be highly appreciated 💖!

Published 01 Nov 2023