[Решено] SyntaxError: Неожиданный токен ‘.’ Ошибка Jest для приложений Next.js


Проблема:

При попытке запустить модульные тесты для приложения Next.js с помощью команды jest возникает следующая ошибка:

({"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)
Войти в полноэкранный режим Выход из полноэкранного режима

Решение:

Эта ошибка может быть вызвана рядом проблем и связана с тем, что Jest хочет обработать код CommonJS. Но по какой-то причине он не может обработать файлы .css и поэтому выдает эту ошибку.

Вот потенциальное решение, которое сработало для меня:

  1. Включите следующую строку: '.css$': '<rootDir>/emptyModule.js', в ваш файл jest.config.js.
  2. Создайте файл с именем emptyModule.js в корневом каталоге вашего приложения.

Вот мой полный файл jest.config.js для дополнительной справки:

// 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)

Вход в полноэкранный режим Выход из полноэкранного режима

Надеюсь, это решит вашу проблему. Если нет, продолжайте искать решения, и вы обязательно найдете то, которое сработает!

Заключение:

Спасибо, что прочитали эту статью!

Если у вас возникли вопросы или проблемы, пожалуйста, оставьте комментарий в этой статье, и я отвечу вам, когда найду время.

Если вы нашли эту статью полезной, пожалуйста, поделитесь ею и не забудьте следить за мной в Twitter и GitHub, связаться со мной в LinkedIn и подписаться на мой канал YouTube.

Оцените статью
Procodings.ru
Добавить комментарий