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.