Cara Mengatasi Error 'Cannot use import statement outside a module' saat Mocking Swiper JS dengan Jest

2 menit baca.
Tags: JavaScriptJestUnit test

Kalau Jest melempar Cannot use import statement outside a module saat testing komponen Swiper, config Jest kamu kemungkinan melewati transform untuk package ESM.

Ini umum terjadi di package modern yang dikirim sebagai ESM secara default.

Kenapa error ini muncul

Jest biasanya mengabaikan node_modules saat transform. Tapi beberapa module (seperti Swiper) tetap butuh transform Babel/ts-jest di environment test.

Akibatnya Jest membaca sintaks ESM apa adanya lalu crash.

Fix di jest config

Izinkan Swiper ikut di-transform:

module.exports = {
  transformIgnorePatterns: [
    '/node_modules/(?!(swiper|ssr-window|dom7)/)'
  ],
};

Artinya: abaikan hampir semua node_modules, kecuali package ini.

Kalau pakai Next.js + Babel

Pastikan transform juga sudah dikonfigurasi:

transform: {
  '^.+\.(js|jsx|ts|tsx)$': 'babel-jest',
},

Tanpa transform engine, allow-list saja tidak akan membantu.

Mock Swiper untuk unit test yang lebih simpel

Kalau kamu tidak butuh perilaku Swiper asli di unit test, mock saja:

jest.mock('swiper/react', () => ({
  Swiper: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
  SwiperSlide: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
}));

Dengan begini test tetap fokus ke logic komponenmu.

Related Posts