CODEWITHSUNDEEP
reactjsreact-reduxjestjsbabel-jest
user4900074
user4900074

Reputation: 1995

jest test case failing for React Component

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);
        });
    });
});

Upvotes: 0

Views: 1732

Answers (2)

Max Millington
Max Millington

Reputation: 4498

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)) + ';';
  },
};

Upvotes: 1

Armin Šupuk
Armin Šupuk

Reputation: 829

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.

Upvotes: 0

Related Questions