Next.js + jest 설정 시 react/swiper 해석이 안되는 이슈

Next.js에서 jest를 설정하던 도중 react-swiper 라이브러리 때문에 꾀나 애 먹었습니다.

 

먼저 swiper/css 를 해석하지 못하는 부분입니다.

 

 

moduleNameMapper: {
  ...jestConfig.moduleNameMapper,
  "swiper/css": "identity-obj-proxy",
},

 

css 모듈을 해석할 수 있도록 identity-obj-proxy 라이브러리를 사용해 주면 됩니다.

 

해당 문제가 해결되니, Cannot use import statement outside a module 에러가 발생합니다.

 

 

해당 부분에 대한 이슈를 검색해 보니

 

transformIgnorePatterns: ["node_modules/(?!(swiper|ssr-window|dom7)/)"],

 

구문을 추가하라는 답변이 많아 추가 해주었습니다.

 

하지만 여전히 같은 이슈가 발생했는데 기본적으로 해당 에러 구문은 ESM 모듈을 해석하지 못해 발생하기 때문에

 

mjs(swiper-react.mjs) 파일 또한 ts-jest가 해석할 수 있도록 세팅을 바꾸었더니 성공적으로 jest를 실행할 수 있었습니다.

 

// ts|tsx|js|jsx 외에 .mjs 확장자도 ts-jest가 해석할 수 있도록 추가
transform: {
  "^.+\\.(ts|tsx|js|jsx|mjs)$": [
    "ts-jest",
    {
      tsconfig: "<rootDir>/tsconfig.test.json",
    },
  ],
},

 

// jest.config.ts
import type { Config } from "jest";
import nextJest from "next/jest.js";

const createJestConfig = nextJest({
  dir: "./",
});

const customJestConfig: Config = {
  setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
  testEnvironment: "jest-environment-jsdom",
  preset: "ts-jest",
  moduleNameMapper: {
    "^@/(.*)$": "<rootDir>/src/$1",
  },
};

const config: () => Promise<Config> = async () => {
  const jestConfig = await createJestConfig(customJestConfig)();
  return {
    ...jestConfig,
    moduleNameMapper: {
      ...jestConfig.moduleNameMapper,
      "swiper/css": "identity-obj-proxy",
    },
    transformIgnorePatterns: ["node_modules/(?!(swiper|ssr-window|dom7)/)"],
    transform: {
      "^.+\\.(ts|tsx|js|jsx|mjs)$": [
        "ts-jest",
        {
          tsconfig: "<rootDir>/tsconfig.test.json",
        },
      ],
    },
  };
};

export default config;

 

// jest.setup.js
import "@testing-library/jest-dom";

 

// tsconfig.test.json
{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "jsx": "react-jsx"
  }
}