NextJS & CSS SyntaxError: Неожиданный токен

Question

Я пытаюсь выполнить модульное тестирование, но единственный способ остановить ошибку - это закомментировать строку import './styles.css.

Как только я возвращаю его обратно, я получаю:

Jest encountered an unexpected token

...

 SyntaxError: Unexpected token.

      1 | import React from 'react';
      2 | import PropTypes from 'prop-types';
    > 3 | import './styles.css';
        | ^
      4 |
      5 |

У меня настроен веб-пакет, babel, jest, энзим, но поиск в Google сообщает мне, что есть разница между запуском приложения (через веб-пакет) и использованием файлов .css против выполнения тестов, которые могут читать .css файлы , который должен быть настроен отдельно.

Из-за любви и денег я не могу найти пример, когда import './styles.css успешно импортирован и тесты пройдены.

Может кто-нибудь помочь?

Answer 1

Мне удалось заставить это работать, нажав https://github.com/eddyerburgh/jest-transform-stub

Мой jest.config.js теперь выглядит так:

module.exports = {
    setupFiles: ['<rootDir>/jest.setup.js'], // links to normal "configure({ adapter: new Adapter() })" stuff.

    testPathIgnorePatterns: ['<rootDir>/.next/', '<rootDir>/node_modules/'], // ignores test files in .next(js) & node modules

    transform: {
      "^.+\\.js$": "babel-jest", // anything .js is babel'd for jest to consume
      "^.+.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub" // anything style related is ignored and mapped to jest-transform-stub module
    },
    moduleNameMapper: {
      '\\.css$': '<rootDir>/EmptyModule.js' // <-- had to pop this in the following day to get any separetly imported .css files mapped to an empty module / object. So if i try to do import 'react-style-module/styles/my-styles.css' it would fail, though 'import './styles.css' worked. Now with this mapped correctly also, everything is imported/mapped/passing successfully.
    } 
  }

Если у кого-то есть другие более аккуратные решения, пожалуйста, сообщитея знаю.х