リアクションコンポーネントに失敗したテストケース

Question

リアクションコンポーネントをモックしようとすると、私はエラー以下になります。

？テストスイートを実行できませんでした

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) 

これは私のpackage.jsonの外観です。誰かが私に正しい方向を向けることができますか？

{ 
    "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" 
    } 
} 

これは私のテストケースはおそらく

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

Answer 1

ウェブパックを使用しているとしますか？ docsからこのメモを確認してください。冗談設定のmoduleNameMapperまたはtransformオプションを使用して、cssファイルを偽装/無視することができます。

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

Answer 2

どのように見えるか、スタイルシートをロードすると、いくつかの障害です。コンポーネントとモックプロセスに関する詳細情報を提供する必要があります。おそらく、.cssファイルを.jsファイルとしてロードしています。