jeudi 15 juin 2017

SyntaxError: /src/components/shared/logo/_Logo.css: Unexpected token (1:0) Mocha Css

I am having an odd error imo, I don't really understand why I am seeing this now as I've been using these tests without any problems, I left it for a month or so and tried to run again and saw the following:

Error

npm test

> wekindred.com@0.0.1 test /var/www
> BABEL_ENV=test nyc --require babel-register mocha --watch 'test/**/*.spec.js'


SyntaxError: /var/www/src/components/shared/logo/_Logo.css: Unexpected token (1:0)
> 1 | .logo {
    | ^
  2 |   font-size: 5rem;
  3 | }

Package.json

{
  "main": "./src/index.js",
  "scripts": {        "test": "BABEL_ENV=test nyc --require babel-register mocha --watch tap 'test/**/*.spec.js'",
  },
  "dependencies": {
    .....
    "enzyme": "^2.8.0",
    "react": "^15.5.0",
    "react-addons-test-utils": "^15.5.0",
    "react-css-modules": "^4.1.0",
    "react-dom": "^15.5.0",
    "react-redux": "^5.0.3",
    "react-router": "^4.1.1",
    "react-router-dom": "^4.0.0",
    "react-router-redux": "^5.0.0-alpha.6",
    "react-tap-event-plugin": "^2.0.1",
    "react-test-renderer": "^15.5.4",
    "webpack": "^2.2.1"
    .....
  },
  "devDependencies": {
    .....
    "babel-cli": "^6.24.0",
    "babel-core": "^6.24.0",
    "babel-loader": "^6.4.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.2.2",
    "babel-preset-es2015": "^6.24.0",
    "babel-preset-react": "^6.23.0",
    "babel-preset-react-hmre": "^1.1.1",
    "babel-preset-stage-0": "^6.24.1",
    "babel-register": "^6.24.1",
    "babel-runtime": "^6.23.0",
    "chai": "^3.5.0",
    "css-loader": "^0.27.3",
    "css-modules-require-hook": "^4.0.6",
    "mocha": "^3.2.0",
    "node-sass": "^4.5.2",
    "nyc": "^10.2.0",
    "path": "^0.12.7",
    "postcss-fontpath": "^0.3.0",
    "postcss-load-config": "^1.2.0",
    "postcss-loader": "^1.3.3",
    "postcss-nested": "^1.0.0",
    "postcss-simple-vars": "^3.0.0",
    "postcss-strip-inline-comments": "^0.1.5",
    "precss": "^1.4.0",
    "style-loader": "^0.16.0",
    "svg-react-loader": "^0.3.7",
    "url-loader": "^0.5.8",
    "webpack-config": "^7.0.0",
    .....
  },
  "nyc": {
    "all": true,
    "include": [
      "src/**/*.js"
    ],
    "cache": true,
    "require": [
      "./test/helper/registerBabel.js",
      "./test/helper/setup.js"
    ]
  }
}

registerBabel.js

require('babel-register')({
    ignore: /node_modules\/(?!ProjectB)/
});

setup.js (mocha helper)

hook({
  extensions: ['.css'],
  generateScopedName: '[local]',
  preprocessCss: (data, filename) =>
    sass.renderSync({
      data,
      file: filename,
      importer: (url) => {
        if (url.indexOf('~') === 0) {
          const node_modules_path = path.resolve(__dirname, '../..', 'node_modules');

          return {
            file: path.join(node_modules_path, url.replace('~', ''))
          };
        }

        return {file: url};
      }
    }).css
});

babelrcrc

{
  "presets": [
    ["es2015", {"modules": false}],
    "stage-0",
    "react"
  ],
  "plugins": [
    "react-hot-loader/babel"
  ],
  "env": {
    "development/client": {
      "plugins": [
        ["transform-runtime", {
          "helpers": false,
          "polyfill": false,
          "regenerator": true
        }]
      ]
    },
    "test": {
      "presets": [
        ["es2015"],
        "stage-0",
        "react"
      ],
      "plugins": [
        ["transform-runtime", {
          "helpers": false,
          "polyfill": false,
          "regenerator": true
        }]
      ]
    }
  }
}

**component that uses _logo.css

import React from 'react';
import logo from './_Logo.css';
import * as font from '../font/fontello.css';

class Logo extends React.Component {
    render() {
        return (
            <div className={logo.logo +' '+font['icon-logo']}></div>
        );
    }
};

export default Logo;

_Logo.css

.logo {
  font-size: 5rem;
}

Aucun commentaire:

Enregistrer un commentaire