Unerwartete Token - Jest für vorhandene React + Web-Pack-App

Question

Ich habe eine einfache React App. Ich versuche, Jest (Testing Framework für React) zu meiner bestehenden Reactive-App zu konfigurieren. Wenn ich versuche, die Testfälle von npm Test auszuführen, gibt es mir die folgende Fehlermeldung:

> openmrs-owa-built-in-reports@0.1.0 test D:\OpenMRS\OWA\openmrs-owa-built-in-reports 
> jest 

FAIL app\js\__tests__\reports\common\ReportAsTableView.test.js 
    ● Test suite failed to run 

    D:/OpenMRS/OWA/openmrs-owa-built-in-reports/app/js/__tests__/reports/common/ReportAsTableView.test.js: Unexpected token (14:16) 
     12 | 
     13 |   const rendered = renderer.create(
     > 14 |     <ReportAsTableView reportUUID="e451ae04-4881-11e7-a919-92ebcb67fe33" 
      |    ^
     15 |     reportParameters= {params} /> 
     16 |  ); 
     17 |   expect(rendered.toJSON()).toMatchSnapShot(); 

Test Suites: 1 failed, 1 total 
Tests:  0 total 
Snapshots: 0 total 
Time:  0.948s 
Ran all test suites. 
npm ERR! Test failed. See above for more details. 

Mein Reagieren App gebündelt mit webpack. Ich werde sehr dankbar sein, wenn mir jemand sagen könnte, wie ich dieses Problem lösen kann.

Hier ist mein Testfall:

import React from 'react'; 
import renderer from 'react-test-renderer'; 
import ReportAsTableView from '../../../components/reports/common/ReportAsTableView'; 

describe('ReportAsTableView renders correctly ',() => { 
    it('renders correctly',() => { 
     const params = { 
      "startDate": "2017-05-05", 
      "endDate": "2017-10-05" 
     }; 

     const rendered = renderer.create(
       <ReportAsTableView reportUUID="e451ae04-4881-11e7-a919-92ebcb67fe33" 
       reportParameters= {params} /> 
     ); 
     expect(rendered.toJSON()).toMatchSnapShot(); 
    }); 
}); 

Unten ist mein package.json

{ 
    "name": "openmrs-owa-built-in-reports", 
    "version": "0.1.0", 
    "description": "built-in reports for reference application", 
    "repository": { 
    "type": "git", 
    "url": "https://github.com/JudeNiroshan/openmrs-owa-openmrs-owa-built-in-reports" 
    }, 
    "dependencies": { 
    "bootstrap": "^3.3.7", 
    "jquery": "^3.2.1", 
    "react": "^15.4.1", 
    "react-dom": "^15.4.1", 
    "react-router-dom": "^4.1.1" 
    }, 
    "devDependencies": { 
    "archiver": "^1.0.0", 
    "babel-core": "^6.2.1", 
    "babel-jest": "^20.0.3", 
    "babel-loader": "^6.2.0", 
    "babel-preset-es2015": "^6.1.18", 
    "babel-preset-react": "^6.16.0", 
    "browser-sync": "^2.11.1", 
    "browser-sync-webpack-plugin": "^1.0.1", 
    "copy-webpack-plugin": "^4.0.1", 
    "css-loader": "^0.23.1", 
    "extract-text-webpack-plugin": "^1.0.1", 
    "file-loader": "^0.8.5", 
    "html-loader": "^0.4.3", 
    "html-webpack-plugin": "^2.24.1", 
    "identity-obj-proxy": "^3.0.0", 
    "jest": "^20.0.4", 
    "on-build-webpack": "^0.1.0", 
    "raw-loader": "^0.5.1", 
    "react-test-renderer": "^15.6.1", 
    "regenerator-runtime": "^0.10.5", 
    "rimraf": "^2.5.2", 
    "style-loader": "^0.13.1", 
    "url-loader": "^0.5.7", 
    "webpack": "^1.12.13", 
    "yargs": "^4.3.1" 
    }, 
    "scripts": { 
    "clean": "rimraf dist && rimraf coverage*", 
    "build": "npm run clean && webpack --progress --colors --mode=production --target=web", 
    "build:dev": "npm run clean && webpack --progress --colors --mode=dev --target=web", 
    "build:prod": "npm run test && npm run build", 
    "build:deploy": "webpack --progress --colors --mode=deploy --target=web", 
    "watch": "webpack --progress --colors --watch --mode=deploy --target=web", 
    "test": "jest" 
    }, 
    "keywords": [ 
    "OpenMRS", 
    "Open", 
    "Web", 
    "App" 
    ], 
    "author": "JudeNiroshan", 
    "license": "MPL-2.0", 
    "jest": { 
    "automock": false, 
    "browser": true, 
    "moduleNameMapper": { 
     "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "./app/js/__mocks__/fileMock.js", 
     "\\.(css|less)$": "identity-obj-proxy" 
    }, 
    "moduleFileExtensions": [ 
     "js", 
     "jsx" 
    ], 
    "moduleDirectories": [ 
     "node_modules" 
    ], 
    "transform": { 
     "^.+\\.jsx?$": "./node_modules/babel-jest", 
     "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "./app/js/__mocks__/fileTransformer.js" 
    }, 
    "testEnvironment": "jsdom", 
    "roots": [ 
     "./app/js/__tests__" 
    ], 
    "testRegex": ".*.test.js", 
    "verbose": true 
    } 
} 

Alle anderen Beiträge Ich habe ähnlich wie dieses Problem zu Gesprächen über eine Datei als babelrc namens gesehen. Aber in meinem Projekt konnte ich solch eine Datei nicht finden. Hier ist das Projekt ->link

Answer 1

Sie konfiguriert Babel in Ihrem webpack config und dies wird nur für Webpack gelten. Wenn andere Tools, wie Jest, Babel verwenden, sehen sie diese Konfiguration nicht, da sie nicht auf die Webpack-Konfiguration schauen. Sie können eine Datei .babelrc verwenden, um Babel zu konfigurieren, und das gilt für alles, das Babel (nicht nur Webpack) ausführt.

Die Verwendung einer .babelrc wird normalerweise bevorzugt, da Sie eine allgemeine babel-Konfiguration haben möchten, und wenn Sie eine Einstellung überschreiben müssen, können Sie dies immer noch in der spezifischen Anwendung wie in der Webpack-Konfiguration tun.

Erstellen Sie den folgenden .babelrc:

{ 
    "presets": ["es2015", "react"] 
} 

Damit können Sie die presets Option in Ihrem webpack Config entfernen, weil es die .babelrc verwenden. Beachten Sie, dass cacheDirectory option für babel-loader spezifisch ist und nicht zum Konfigurieren des zugrunde liegenden Babel verwendet wird.

Sie haben auch einen Tippfehler in Ihrem Test, toMatchSnapShot() sollte toMatchSnapshot() sein.

expect(rendered.toJSON()).toMatchSnapshot();