Testing Reagieren App mit Jest: unerwartetes Token

Question

Ich baue ein Reagieren/Redux/ReactRouter/Jest vorformulierten aber ich bin ein Problem haben, wenn eine Komponente mit react-test-renderer testen.

Ich habe zwei Arten von Tests eingeführt: Unit Tests für meine Redux-Aktionen und Snapshot-Tests als eine Form von Funktionstests für meine Komponenten.

Zunächst einmal funktionieren meine Komponententests perfekt. Hier ist eine:

import mockStore from 'redux-mock-store'; 
import {fetchWordDefinitions} from '../src/actions'; 

describe('Async fetch of word definitions',() => { 
    it('fetches a word definitions', async() => { 
     const mockedResponse = [ 
      {text: 'First definition'}, 
      {text: 'Second definition'}, 
      {text: 'Third definition'} 
     ]; 

     fetch.mockResponse(JSON.stringify(mockedResponse)); 

     const store = mockStore({}); 
     await store.dispatch(fetchWordDefinitions('whatever')); 

     expect(store.getActions()).toEqual([ 
      {type: 'ERROR', error: null}, 
      {type: 'FETCHING', fetching: true}, 
      { 
       type: 'WORD_DEFINITIONS', 
       word: 'whatever', 
       definitions: [ 
        "First definition", 
        "Second definition", 
        "Third definition" 
       ] 
      }, 
      {type: 'FETCHING', fetching: false} 
     ]); 
    }); 
}); 

Wie man sehen kann ich verwende ES6 dort (beide im Test und in der getesteten Aktion) und alles funktioniert.

Das Problem ist, wenn ich versuche, eine Komponente zu testen, indem Sie es mit react-test-renderer erstellen. Hier ist der gebrochene Test:

import React from 'react'; 
import {Provider} from 'react-redux'; 
import renderer from 'react-test-renderer'; 
import mockStore from 'redux-mock-store'; 
import Home from './../src/containers/Home'; 

test('test',() => { 
    const store = mockStore({}); 

    const container = renderer.create(
     <Provider store={store}> 
      <Home/> 
     </Provider> 
    ); 

    // some assertions - execution does not get here 
}); 

Hier ist, was ich in der CLI erhalten:

FAIL __tests__/Home.test.js 
    ● Test suite failed to run 

    /data/src/containers/Home.js: Unexpected token (8:11) 
     6 | 
     7 | class Home extends ReduxComponent { 
     > 8 |  search = (value) => { 
      |   ^
     9 |   if (value !== this.status().selectedWord) { 
     10 |    this.dispatch(fetchRelatedWords(value)); 
     11 |   } 

Und das ist meine .babelrc-Datei (die in der Wurzel meiner Projektordner sitzt):

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

Und schließlich die packages.json Datei:

{ 
    "name": "vocabulary", 
    "version": "0.1.0", 
    "author": "Francesco Casula <fra.casula@gmail.com>", 
    "license": "MIT", 
    "private": false, 
    "dependencies": { 
     "prop-types": "^15.5.8", 
     "react": "^15.5.4", 
     "react-dom": "^15.5.4", 
     "react-redux": "^5.0.4", 
     "react-router": "^4.1.1", 
     "react-router-dom": "^4.1.1", 
     "redux": "^3.6.0", 
     "redux-thunk": "^2.2.0" 
    }, 
    "devDependencies": { 
     "babel-jest": "^19.0.0", 
     "babel-preset-es2015": "^6.24.1", 
     "babel-preset-react": "^6.24.1", 
     "jest-fetch-mock": "^1.0.8", 
     "react-scripts": "^0.9.5", 
     "react-test-renderer": "^15.5.4", 
     "redux-logger": "^3.0.1", 
     "redux-mock-store": "^1.2.3", 
     "regenerator-runtime": "^0.10.3" 
    }, 
    "scripts": { 
     "start": "react-scripts start", 
     "build": "react-scripts build", 
     "eject": "react-scripts eject", 
     "test": "jest" 
    }, 
    "jest": { 
     "verbose": true, 
     "setupFiles": [ 
      "./config/jest/setup.js" 
     ] 
    } 
} 

Wenn man sich den Fehler anschaut, scheint es, dass Babel nicht magisch ist? Was ich seltsam finde, ist, dass es in den anderen Tests (den Action-Einsen) korrekt transpiliert.

hoffe, ihr mir diese Figur helfen können aus :-)

Answer 1

Sie die class-properties transform benötigen. Klasseneigenschaften sind noch nicht in der ECMAScript-Spezifikation enthalten, aber es gibt Babel-Plugins, die dieses Verhalten ermöglichen.