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 |

我已经配置了webpack，babel，jest，enzyme，但是谷歌搜索告诉我，运行应用程序（通过webpack）与使用.css文件 vs 运行可以读取{{{1 }}文件，需要分别进行配置。

出于爱情或金钱的考虑，我找不到一个成功导入.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.
    } 
  }

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

Answer 2

我想你这样宣告：

import css from './styles.css'

<div className={css.test}>

</div>

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

NextJS＆CSS语法错误：意外令牌

2 个答案: