jest test case failing for React Component

Question

I'm getting below error, when i try to mock my React Component.

? Test suite failed to run

C:\UBS\Dev\workspace\topcat-ui\node_modules\antd\lib\style\index.css:9
html {
     ^
SyntaxError: Unexpected token {

  at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/ScriptTransformer.js:289:17)
  at Object.<anonymous> (node_modules/antd/lib/pagination/style/css.js:3:1)
  at Object.<anonymous> (src/main/webapp/js/pages/dashboard/Dashboard.jsx:1:176)

This is what my package.json looks like. Can someone point me to the right direction?

{
  "name": "dashboard",
  "version": "1.0.0",
  "description": "Realtime dashboard",
  "main": "index.html",
  "scripts": {
    "build": "node_modules\\.bin\\webpack",
    "dev": "node_modules\\.bin\\webpack --watch",
    "test": "jest",
    "test-coverage": "jest --coverage"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.25.0",
    "babel-jest": "^20.0.3",
    "babel-loader": "^7.0.0",
    "babel-plugin-import": "^1.2.1",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.4",
    "enzyme": "^2.9.1",
    "eslint": "^4.1.1",
    "eslint-loader": "^1.8.0",
    "eslint-plugin-react": "^7.1.0",
    "html-webpack-plugin": "^2.28.0",
    "jest": "^20.0.4",
    "moment": "^2.18.1",
    "path": "^0.12.7",
    "react-hot-loader": "^3.0.0-beta.7",
    "react-test-renderer": "^15.6.1",
    "style-loader": "^0.18.2",
    "webpack": "^2.6.1"
  },
  "dependencies": {
    "antd": "^2.11.0",
    "axios": "^0.16.2",
    "babel-polyfill": "^6.23.0",
    "react": "^15.5.4",
    "react-dom": "^15.6.1",
    "react-file-download": "^0.3.4",
    "react-redux": "^5.0.5",
    "react-router": "^4.1.1",
    "react-router-dom": "^4.1.1",
    "redux": "^3.6.0",
    "redux-thunk": "^2.2.0",
    "url-pattern": "^1.0.3"
  }
}

This is how my test case looks like

import React from 'react';
import {mount} from 'enzyme';
import Dashboard from '../../../main/webapp/js/pages/dashboard/Dashboard';

function setup() {
    const Dashboard = mount(<Dashboard />);
    return {
        Dashboard
    }
}

describe('Components', () => {
    describe('Dashboard', () => {
        it('should render itself', () => {
            const { Dashboard } = setup();
            expect(Dashboard.find('table').length).toBe(1);
        });
    });
});

This isn't a problem with React/Babel/Jest. This is a problem with your CSS. — Sumner Evans, Jul 11 '17 at 20:56

score 1 · Accepted Answer · answered Jul 11 '17 at 21:32

1

I'm assuming you are using webpack? Check out this note from the docs. You can use the moduleNameMapper or the transform option in your jest config to mock/ignore your css files.

{
 "jest": {
    "moduleNameMapper": {
      "\\.(css|less)$": "identity-obj-proxy"
    },
    "transform": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/fileTransformer.js"
    }
  }
}


// fileTransformer.js
const path = require('path');

module.exports = {
  process(src, filename, config, options) {
    return 'module.exports = ' + JSON.stringify(path.basename(filename)) + ';';
  },
};

answered Jul 11 '17 at 21:32

Max Millington

4,378
4
27
34

thank you do i put this config in webpack.config.js ? { "jest": { "moduleNameMapper": { "\\.(css|less)$": "identity-obj-proxy" }, "transform": { "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "/fileTransformer.js" } } } – user4900074 Jul 12 '17 at 15:23
@user4900074 no, put it in your `package.json` – Max Millington Jul 12 '17 at 15:30

score 0 · Answer 2 · answered Jul 11 '17 at 20:57

0

Probably some failure with loading the stylesheet. You have to provide more information about the component and the mocking process. It's probably loading the .css file as a .js file.

answered Jul 11 '17 at 20:57

Armin Šupuk

809
1
9
19

import React from 'react'; import {mount} from 'enzyme'; import Dashboard from '../../../main/webapp/js/pages/dashboard/Dashboard'; function setup() { const Dashboard = mount(); return { Dashboard } } describe('Components', () => { describe('Dashboard', () => { it('should render itself', () => { const { Dashboard } = setup(); expect(Dashboard.find('table').length).toBe(1); }); }); }); – user4900074 Jul 11 '17 at 21:05
thank you, I'm a beginner using React, Jest . so Please bear with me. The error is coming from index.css stylesheet inisde node_modules folder. Not sure how to post the entire stylesheet. This is how my mock looks like. Please let me know if you need additional info. – user4900074 Jul 11 '17 at 21:05
Check this out: https://stackoverflow.com/questions/39418555/syntaxerror-with-jest-and-react-and-importing-css-files If it doesn't help, I'll investigate further, but it's probably as I said, you are loading currently .css as .js – Armin Šupuk Jul 11 '17 at 21:08

jest test case failing for React Component

2 Answers2