NextJS & CSS SyntaxError: Unexpected token答案

【问题标题】：NextJS & CSS SyntaxError: Unexpected tokenNextJS & CSS SyntaxError: Unexpected token
【发布时间】：2019-10-08 20:08:05
【问题描述】：

我正在尝试进行单元测试，但我可以阻止错误抛出的唯一方法是注释掉 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 |

我已经配置了 webpack、babel、jest、enzyme，但谷歌搜索告诉我运行应用程序（通过 webpack）和使用 .css 文件之间存在区别vs 运行可以读取 .css 的测试文件，需要单独配置。

为了爱情和金钱，我找不到成功导入 import './styles.css 并且测试通过的示例。

谁能帮忙？

【问题讨论】：

你是如何运行你的测试的？你是否也使用 Webpack 运行它们？甚至babel-node？问题是 Webpack 理解这段代码需要捆绑在一起，就好像你只是试图通过 Node 运行测试然后 Node 不会理解，事实上除非你启用了ESM，它甚至不会理解import。在运行之前，您可能需要查看 babel-jest 之类的内容来编译您的测试代码。
@James 欢呼，我刚刚使用了 Create Next App，然后安装了与 github/examples/with-jest github.com/zeit/next.js/tree/master/examples/with-jest 中存在的相同模块，现在就尝试 Babel-Jest。我喜欢 NextJS 的 SSR，但配置太牛了？？？？
似乎这是一个常见问题github.com/facebook/jest/issues/334 我正在尝试放入条件逻辑来检测 NODE_ENV 是否为测试，如果不是，则导入样式表，但这也失败了，因为 if 语句推送要求/导入下来然后它的"'import' and 'export' may only appear at the top level"
所以要明确一点，当您删除此导入时，您的测试会按预期运行吗？另外值得注意的是，您所指的问题已超过 2 年，并且已关闭。不确定您阅读的线程有多远，但回购维护者有一个comment，他将人们指向 babel-jest 的方向，以了解正在加载的任何动态 CSS。
@James 是的，当我注释掉样式导入时，一切运行正常。试图让babel-jest 工作（见前面的评论^），但即使这样也有点令人困惑。 Jest 的配置文档提供了完整、可用的示例。我的jest.config.js 有一个testPathIgnorePatterns 键值并调用jest.setup.js 文件。但是 babel-jest 显然已经包含在 jest 本身中，这意味着没有必要对其进行配置更改，我猜测 - 也许这让我将babel-node 作为最后的选择。 ????

标签： reactjs webpack jestjs next.js

【解决方案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.
    } 
  }

如果其他人有其他更简洁的解决方案，请告诉我。 x

【讨论】：

【解决方案2】：

我想你是这样声明的：

import css from './styles.css'

<div className={css.test}>

</div>

参考：https://github.com/zeit/next-plugins/tree/master/packages/next-css

【讨论】：