Come utilizzare Jest con React Native

Question

Lo testing section dei documenti per React Native suggerisce che Jest è il modo ufficiale per eseguire test unitari. Tuttavia, non spiegano come ottenerlo. L'esecuzione di Jest senza alcuna impostazione fornisce errori di sintassi (senza numeri di riga :() perché non applica le trasformazioni (ad esempio caratteristiche ES6, JSX e Flow) che il codice React Native tende a utilizzare. C'è una cartella jestSupport nell'origine React Native . provare che contiene un env.js e scriptPrerocess.js, quest'ultimo ha codice per applicare le trasformazioni Così ho copiato quelli nel mio progetto e ha aggiunto la seguente sezione al mio package.json:

"jest": { 
    "scriptPreprocessor": "jestSupport/scriptPreprocess.js", 
    "setupEnvScriptFile": "jestSupport/env.js" 
    }, 

Questo risolve il primo errore, ma Ricevo ancora il seguente errore:

Using Jest CLI v0.4.0 
FAIL js/sync/__tests__/SynchronisedStorage-tests.js 
SyntaxError: /Users/tom/my-project/js/sync/__tests__/SynchronisedStorage-tests.js: /Users/tom/my-project/js/sync/SynchronisedStorage.js: /Users/tom/my-project/node_modules/react-native/Libraries/react-native/react-native.js: /Users/tom/my-project/node_modules/react-native/node_modules/react-tools/src/browser/ui/React.js: /Users/tom/my-project/node_modules/react-native/node_modules/react-tools/src/utils/ReactChildren.js: /Users/tom/my-project/node_modules/react-native/node_modules/react-tools/src/addons/ReactFragment.js: /Users/tom/my-project/node_modules/react-native/node_modules/react-tools/src/classic/element/ReactElement.js: /Users/tom/my-project/node_modules/react-native/node_modules/react-tools/src/core/ReactContext.js: /Users/tom/my-project/node_modules/react-native/node_modules/react-tools/src/vendor/core/warning.js: Unexpected token . 
1 test failed, 0 tests passed (1 total) 
Run time: 0.456s 

C'è altro che devo fare per fare Jest capisce React Native? Esistono esempi di setup di Jest per testare React Native?

EDIT:

C'era un check-in scriptPreprocess che ha fermato da in esecuzione su qualsiasi file in node_modules che ovviamente comprendeva tutta la React nativo. Rimuovendo ciò corregge l'errore sopra. Tuttavia, ora sto ricevendo più errori dalla sorgente React Native, sembra decisamente che non sia pensato per essere eseguito all'interno di Jest.

EDIT2:

impostare in modo esplicito il mock per il modulo react-native funziona:

jest.setMock('react-native', {}); 

che sembra che sta per essere molto manuale e non molto utile per testare il codice che interagisce con il React API Native molto. Sicuramente mi sento ancora come se mi mancasse qualcosa!

Answer 1

Ho fatto in modo che Jest funzioni per la mia applicazione React Native e sta eseguendo test senza problemi sui file con le trasformazioni ES6 ed ES7.

Per arrivare Jest al lavoro, ho seguito questi passi:

1. copiata la cartella jestSupport dal Reagire maestro repo nativo alla mia cartella react-native in node_modules.

2. curato la linea di "scherzo" nella mia packages.json a punti per i file nella cartella jestSupport

La linea "scherzo" nel mio packages.json ora sembra lke questo:

"jest": { 
    "scriptPreprocessor": "<rootDir>/node_modules/react-native/jestSupport/scriptPreprocess.js", 
    "setupEnvScriptFile": "<rootDir>/node_modules/react-native/jestSupport/env.js", 
    "testFileExtensions": [ 
    "js" 
    ], 
    "unmockedModulePathPatterns": [ 
    "source-map" 
    ] 
}, 

Answer 2

Per le versioni più recenti di jest, impostarlo su react-native è molto semplice.

Installare scherzo usando

npm install --save-dev jest-cli babel-jest 

In package.json, aggiungere questo

"scripts": { 
    "start": "babel-node ./server/server.js", 
    "import-data": "babel-node ./scripts/import-data-from-parse.js", 
    "update-schema": "babel-node ./server/schema/updateSchema.js", 
    "test": "jest", 
    "lint": "eslint ." 
}, 
"jest": { 
    "haste": { 
    "defaultPlatform": "ios", 
    "platforms": [ 
     "ios", 
     "android" 
    ], 
    "providesModuleNodeModules": [ 
     "react-native" 
    ] 
    } 
}, 

Potrebbe essere solo bisogno di aggiungere linee relative alla scherzare

ora che è possibile utilizzare

npm test 

per eseguire jest.

Consultare il repository github di f8app per ulteriori informazioni al riguardo.

Answer 3

A partire da React Native v0.37.0, Jest fa parte del nuovo modello di app.

In una nuova applicazione è possibile eseguire i test subito:

$ react-native init MyAwesomeApp 
$ cd MyAwesomeApp 
$ npm test 
... 
Tests:  2 passed