语法错误:无效或意外的令牌@import [英] SyntaxError: Invalid or unexpected token @import

问题描述

我正在尝试将Jest和Enzyme添加到React Webpack项目中.

I am trying to add Jest and Enzyme to a React webpack project.

一切正常，直到我向组件添加测试并使用导入Google字体的样式表.

Everything is working, until I add tests to a component, with a style sheet importing google fonts.

我得到的错误是:

● Test suite failed to run
    /Users/dev/Code/Git/react-redux-webpack/src/App.sass:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){@import url('https://fonts.googleapis.com/css?family=Barlow+Condensed')
                                                                                             ^
    SyntaxError: Invalid or unexpected token

sass文件如下:

@import url('https://fonts.googleapis.com/css?family=Barlow+Condensed')

body
    background: #f9f9f9
    color: #444444
    font-family: 'Barlow Condensed', sans-serif
    text-align: center

.container
    width: 100%
    max-width: 960px
    margin: 0 auto

.container__logo--image
    position: absolute
    top: 50%
    left: 50%
    margin-left: -75px
    margin-top: -75px

我的.babelrc:

My .babelrc:

{
  "presets": [
    "react",
    "stage-0",
    [
      "env",
      {
        "targets": {
          "node": "6.10",
          "browsers": ["last 2 versions", "safari >= 7"]
        }
      }
    ]
  ],
  "plugins": ["transform-class-properties"]
}

我在webpack中拥有所有必需的加载程序，我可以整天构建和维护sass，没有任何问题.这是我在苦苦挣扎的笑话的介绍.

I have all the required loaders in webpack, I can build and serve the sass all day with no issues. It is the introduction of Jest I am struggling with.

我已在此处将代码的当前状态推送到了一个分支

I have pushed a branch with the current state of code here https://github.com/nombienombie/react-redux-webpack/tree/feature/jest-unit-tests

推荐答案

我在我的package.json中添加了以下内容:

I added the following to my package.json:

  "jest": {
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
      "\\.(css|sass)$": "<rootDir>/__mocks__/styleMock.js"
    }
  },

并在 mocks 文件夹中添加了以下内容:

and added the following in a mocks folder:

fileMock.js

module.exports = 'test-file-stub';

styleMock.js

module.exports = {}

这篇关于语法错误:无效或意外的令牌@import的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！