title: How to fix "SyntaxError: Invalid or unexpected token @import"?
body: <p>I am trying to add Jest and Enzyme to a React webpack project.</p>
  
  <p>Everything is working, until I add tests to a component, with a style sheet importing google fonts.</p>
  
  <p>The error I get is:</p>
  
  <pre><code>● Test suite failed to run
      /Users/dev/Code/Git/react-redux-webpack/src/App.sass:1
      ({"Object.&lt;anonymous&gt;":function(module,exports,require,__dirname,__filename,global,jest){@import url('https://fonts.googleapis.com/css?family=Barlow+Condensed')
                                                                                               ^
      SyntaxError: Invalid or unexpected token
  </code></pre>
  
  <p>The sass file looks like:</p>
  
  <pre><code>@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
  </code></pre>
  
  <p>My .babelrc:</p>
  
  <pre><code>{
    "presets": [
      "react",
      "stage-0",
      [
        "env",
        {
          "targets": {
            "node": "6.10",
            "browsers": ["last 2 versions", "safari &gt;= 7"]
          }
        }
      ]
    ],
    "plugins": ["transform-class-properties"]
  }
  </code></pre>
  
  <p>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. </p>
  
  <p>I have pushed a branch with the current state of code here <a href="https://github.com/nombienombie/react-redux-webpack/tree/feature/jest-unit-tests" rel="noreferrer">https://github.com/nombienombie/react-redux-webpack/tree/feature/jest-unit-tests</a></p>