starter - Cómo usar Jest con React Native

react native video af

Question

La sección de pruebas de los documentos para React Native sugiere que Jest es la forma oficial de realizar pruebas unitarias. Sin embargo, no explican cómo configurarlo. La ejecución de Jest sin ninguna configuración genera errores de sintaxis (sin números de línea :() porque no aplica las transformaciones (por ejemplo, las características de ES6, JSX y Flow) que suele utilizar el código React Native. Hay una carpeta jestSupport en la fuente React Native intente que contiene un env.js y scriptPrerocess.js , este último tiene un código para aplicar las transformaciones. Así que los copié en mi proyecto y agregué la siguiente sección a mi package.json:

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

Esto corrige el primer error pero sigo recibiendo el siguiente error:

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

¿Hay algo más que deba hacer para que Jest entienda a React Native? ¿Hay algún ejemplo de configuración de Jest para probar React Native?

EDITAR:

Hubo una comprobación en scriptPreprocess que scriptPreprocess que se ejecutara sobre cualquier archivo en node_modules que, por supuesto, incluía la totalidad de React Native. Eliminando eso arregla el error anterior. Sin embargo, ahora estoy recibiendo más errores de la fuente React Native, definitivamente parece que no está destinado a ejecutarse dentro de Jest.

EDIT2:

Establecer explícitamente el simulacro para los trabajos de módulos react-native :

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

Parece que va a ser muy manual y no muy útil para probar código que interactúe con la React Native API. ¡Definitivamente todavía siento que me estoy perdiendo algo!

Answer 1

A partir de React Native v0.37.0, Jest forma parte de la nueva plantilla de aplicación.

En una nueva aplicación puedes ejecutar pruebas de inmediato:

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

Answer 2

Conseguí que Jest trabajara para mi aplicación React Native, y está ejecutando pruebas sin ningún problema en archivos con transformaciones ES6 y ES7.

Para hacer funcionar a Jest, seguí estos pasos:

1. github.com/facebook/react-native/tree/master/jestSupport carpeta github.com/facebook/react-native/tree/master/jestSupport del repositorio maestro React Native a mi carpeta react-native en node_modules .

2. Edité la línea "jest" en mi packages.json para que apunte a los archivos en la carpeta jestSupport

La línea de "broma" en mis packages.json ahora lke esto:

"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 3

Para las versiones más nuevas de jest , configurarlo para react-native es muy fácil.

Instalar jest usando

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

En package.json , agregue esto

"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"
    ]
  }
},

Es posible que solo necesite agregar líneas relacionadas con la broma.

Ahora puedes usar

npm test

para ejecutar broma

Consulte el repositorio github de f8app para obtener más información sobre esto.