Reagieren Unit-Test mit Jest in es6

Question

Ich bin ziemlich neu in der Welt reagieren und versuchen, einfache Freunde Liste Anwendung zu schreiben. Ich schrieb meinen Freundladen im es6 Stil und benutze Babel als Transpiler von es5 zu es6.

import AppDispatcher from '../dispatcher/app_dispatcher'; 
import { EventEmitter } from 'events'; 
import FRIENDS_CONST from '../constants/friends'; 

const CHANGE_EVENT = 'CHANGE'; 

let friendsList = []; 


let add = (name) => { 

    let counter = friendsList.length + 1; 
    let newFriend = { 
     id: counter, 
     name: name 
    }; 

    friendsList.push(newFriend); 

} 

let remove = (id) => { 
    let index = friendsList.findIndex(e => e.id == id); 
    delete friendsList[index]; 
} 


let FriendsStore = Object.assign({}, EventEmitter.prototype, { 

    getAll:() => { 
     return friendsList; 
    }, 

    emitChange:() => { 
     this.emit(CHANGE_EVENT); 
    }, 

    addChangeListener: (callback) => { 
     this.on(CHANGE_EVENT, callback); 
    }, 

    removeChangeListener: (callback) => { 
     this.removeListener(CHANGE_EVENT, callback); 
    } 

}); 

AppDispatcher.register((action) => { 

    switch (action.actionType) { 
     case FRIENDS_CONST.ADD_FRIENDS: 
      add(action.name); 
      FriendsStore.emitChange(); 
      break; 
     case FRIENDS_CONST.REMOVE_FRIENDS: 
      remove(action.id); 
      FriendsStore.emitChange(); 
      break; 
    } 

}); 

export default FriendsStore; 

Jetzt mag ich meinen Speicher testen und schrieb den Unit-Test auch in es6

jest.dontMock('../../constants/friends'); 
jest.dontMock('../friends_store'); 


describe('FriendsStore',() => { 

    import FRIENDS from '../../constants/friends'; 
    import AppDispatcher from '../../dispatcher/AppDispatcher'; 
    import FriendsStore from '../friends_store'; 

    let FakeAppDispatcher; 
    let FakeFriendsStore; 
    let callback; 

    let addFriends = { 
     actionType: FRIENDS.ADD_FRIENDS, 
     name: 'Many' 
    }; 

    let removeFriend = { 
     actionType: FRIENDS.REMOVE_FRIENDS, 
     id: '3' 
    }; 

    beforeEach(function() { 
     FakeAppDispatcher = AppDispatcher; 
     FakeFriendsStore = FriendsStore; 
     callback = AppDispatcher.register.mock.calls[0][0]; 
    }); 

    it('Should initialize with no friends items', function() { 
     var all = FriendsStore.getAll(); 
     expect(all).toEqual([]); 
    }); 



}); 

Wenn ich den Test mit Anweisung npm test auszuführen, habe ich die Fehlermeldung bekommen:

> react-starterify@0.0.9 test /Volumes/Developer/reactjs/app5 
> echo "Error: no test specified" 

Error: no test specified 

Was mache ich falsch? Die Dateistruktur sieht wie folgt aus:

Answer 1

Um ES6-Syntax und JSX-Dateien zu testen, müssen sie für Jest umgewandelt werden. Jest hat eine Konfigurationsvariable, in der Sie einen Präprozessor (scriptPreprocessor) definieren können. Sie können die babel-jest Präprozessor verwenden:

Nehmen Sie die folgenden Änderungen an package.json:

{ 
    "devDependencies": { 
    "babel-jest": "*", 
    "jest-cli": "*" 
    }, 
    "scripts": { 
    "test": "jest" 
    }, 
    "jest": { 
    "scriptPreprocessor": "<rootDir>/node_modules/babel-jest", 
    "testFileExtensions": ["es6", "js"], 
    "moduleFileExtensions": ["js", "json", "es6"] 
    } 
} 

Und laufen:

$ npm install

Answer 2

ich es getan habe das Tutorial folgende:

npm install --save-dev jest babel-jest babel-preset-es2015 babel-preset-react react-test-renderer 

dann

Add

"scripts": { 
    "test": "jest" 
    }, 
    "jest": { 
    "testPathDirs": [ 
     "src/main/resources/web_pages/__tests__" 
    ] 
    }, 

Ergebnis package.json:

PASS src/main/resources/web_pages/__tests__/modules/utils/ValidationUtil.spec.js (5.214s) 
    ✓ ValidateEmail (5ms) 

Test Suites: 1 passed, 1 total 
Tests:  1 passed, 1 total 
Snapshots: 0 total 
Time:  6.092s, estimated 7s 
Ran all test suites.