jest測試用例失敗React組件

當我嘗試嘲笑我的React組件時，出現錯誤。jest測試用例失敗React組件

？測試套件無法運行

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

來源

2017-07-11 user4900074

這不是React/Babel/Jest的問題。這是你的CSS的問題。 –

我假設你使用的是webpack？從docs看看這個注意事項。您可以在您的jest配置中使用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)) + ';'; 
    }, 
};

來源

2017-07-11 21:32:04

謝謝我把這個配置在webpack.config.js？ { 「笑話」：{ 「moduleNameMapper」：{ 「\\（CSS |以下）$」：「身份的OBJ-代理」 }，「改造」：{ 「\\（ jpg | jpeg | png | gif | eot | otf | webp | svg | ttf | woff | woff2 | mp4 | webm | wav | mp3 | m4a | aac | oga）$「：」 /fileTransformer.js「 } } } – user4900074

@ user4900074不，把它放在你的'package.json' –

真棒！這工作。非常感謝 – user4900074

也許有些衰竭加載樣式表。您必須提供有關組件和嘲笑過程的更多信息。它可能將.css文件加載爲.js文件。

來源

2017-07-11 20:57:27

import從'react'反應;從'酶'導入{mount}; 從'../../../main/webapp/js/pages/dashboard/Dashboard'導入儀表板; 函數設置（）{ const Dashboard = mount（）; 返回{ 控制板 } } 描述（ '組件'，（）=> { 描述（ '控制檯'，（）=> { 它（ '應該呈現本身'，（）=> { 常量{Dashboard} = setup（）; expect（Dashboard.find（'table'）.length）.toBe（1）; }）; }）; }）; – user4900074

謝謝你，我是一名初學者，使用React，Jest。所以請忍受我。錯誤來自index.css樣式表inisde node_modules文件夾。不確定如何發佈整個樣式表。這是我的模擬看起來像。如果您需要其他信息，請告訴我。 – user4900074

看看這個：https：//stackoverflow.com/questions/39418555/syntaxerror-with-jest-and-react-and-importing-css-files如果它沒有幫助，我會進一步調查，但它可能正如我所說，你正在加載當前.css爲.js –

jest測試用例失敗React組件

回答

相關問題