J'essaye de contribuer à une bibliothèque de test. La bibliothèque doit fournir un wrapper pour react-test-renderer comme react-native-testing-library le fait.
Afin de voir si mon code fonctionnait, j'ai écrit un test unitaire simple en utilisant le code que j'ai écrit pour la bibliothèque. Comme il s'agissait du premier test pour React Native, j'ai ajouté react-native
en tant que dépendance de développement avec metro-react-native-babel-preset
. De plus, j'ai ajouté le préréglage à babel.
import TestRenderer from 'react-test-renderer'; import { Text, View } from 'react-native'; import { describe } from 'riteway'; describe('renderReactNativeComponent', async assert => { const text = 'Foo'; const component = TestRenderer.create( <View> <Text>{text}</Text> </View> ); console.log(Text); assert({ given: 'A React Native component', should: 'return a working react test renderer instance', actual: component.findByType('text'), expected: text }); });
La bibliothèque fait ses affirmations en utilisant tape .
Maintenant, chaque test ( test npm
) renvoie l'erreur:
"scripts": { "lint": "eslint source && echo 'Lint complete.'", "typecheck": "npx -p typescript tsc --rootDir . source/test.js --allowJs --checkJs --noEmit --lib es6 --jsx react && echo 'TypeScript check complete.'", "ts": "npm run -s typecheck", "test": "node -r babel-register -r babel-polyfill source/test", "watch": "watch 'clear && npm run -s test | tap-nirvana && npm run -s lint && npm run -s typecheck' source", "precommit": "npm run -s test && npm run -s lint && npm run -s typecheck" }, "devDependencies": { "@types/node": "10.12.27", "babel-cli": "6.26.0", "babel-eslint": "10.0.1", "babel-preset-env": "1.7.0", "babel-preset-react": "6.24.1", "babel-preset-react-native": "4.0.1", "babel-register": "6.26.0", "eslint": "5.14.1", "eslint-plugin-react": "7.12.4", "react": "16.8.3", "react-native": "0.58.5", "tap-nirvana": "1.1.0", "typescript": "3.3.3333", "watch": "1.0.2" }, "dependencies": { "cheerio": "1.0.0-rc.2", "esm": "3.2.6", "react-dom": "16.8.3", "react-test-renderer": "16.8.3", "tape": "4.10.1" }
Lorsque je supprime le préréglage de la configuration babel, j'obtiens l'erreur:
(node:1841) UnhandledPromiseRejectionWarning: Error: Cannot find module 'View' at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15) at Function.Module._load (internal/modules/cjs/loader.js:507:25) at Module.require (internal/modules/cjs/loader.js:637:17) at require (internal/modules/cjs/helpers.js:22:18) at Object.get View [as View] (/path/to/node_modules/react-native/Libraries/react-native/react-native-implementation.js:165:12) at _callee7$ (/path/to/source/test.js:110:6) at tryCatch (/path/to/node_modules/babel-polyfill/node_modules/regenerator-runtime/runtime.js:65:40) at Generator.invoke [as _invoke] (/path/to/node_modules/babel-polyfill/node_modules/regenerator-runtime/runtime.js:303:22) at Generator.prototype.(anonymous function) [as next] (/path/to/node_modules/babel-polyfill/node_modules/regenerator-runtime/runtime.js:117:21) at step (/path/to/source/test.js:27:191) (node:1841) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 3) (node:1841) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code. not ok 10 test exited without ending --- operator: fail at: process.<anonymous> (/path/to/node_modules/tape/index.js:90:19) stack: |- Error: test exited without ending at Test.assert [as _assert] (/path/to/node_modules/tape/lib/test.js:226:54) at Test.bound [as _assert] (/path/to/node_modules/tape/lib/test.js:77:32) at Test.fail (/path/to/node_modules/tape/lib/test.js:319:10) at Test.bound [as fail] (/path/to/node_modules/tape/lib/test.js:77:32) at Test._exit (/path/to/node_modules/tape/lib/test.js:191:14) at Test.bound (/path/to/node_modules/tape/lib/test.js:77:32) at process.<anonymous> (/path/to/node_modules/tape/index.js:90:19) at process.emit (events.js:194:15)
Comment puis-je faire exécuter les composants React Native dans mon test dans une bibliothèque (et en dehors de un projet expo init
ou react-native init
?
EDIT: J'ai découvert que le dépôt utilise Babel 6 , c'est pourquoi le préréglage métro ne semble pas fonctionner. Je l'ai donc échangé contre babel-preset-react-native
et maintenant je suis de retour à l'erreur initiale que View code> introuvable.
EDIT 2: package.json
> node -r babel-register -r babel-polyfill source/test /path/to/node_modules/babel-core/lib/transformation/file/options/option-manager.js:328 throw e; ^ Error: Couldn't find preset "module:metro-react-native-babel-preset" relative to directory
MODIFIER 3:
Désolé, apparemment je n'ai pas inclus mon code, même s'il est utile pour résoudre ce problème. C'est assez basique. J'essaye juste de rendre un
en utilisant ReactTestRenderer
.
{ "presets": [ [ "env", { "targets": { "browsers": ["last 2 versions", "safari >= 7"] } } ], "react", "module:metro-react-native-babel-preset" ] }
4 Réponses :
Supprimez les modules de nœuds et réinstallez
rm -rf node_modules npm install
J'aurais ri si cela avait fonctionné, mais non, même erreur: UnhandledPromiseRejectionWarning: Erreur: Impossible de trouver le module 'View'
. Merci, pensé!
J'ai aussi eu le même problème mais cela a fonctionné pour moi
cela a fonctionné pour moi: nœud P: v14.15.1
npm: 6.14.8
fil: 1.22.4
expo: ~ 39.0. 2
Vous ne retournez rien, vous devez renvoyer une "Vue"
Vous voudrez peut-être simplement utiliser l'exemple suggéré dans https://reactjs.org/docs /test-renderer.html juste pour vous assurer qu'il n'y a rien de mal avec le code que vous avez écrit, puis ajoutez votre propre logique pour l'améliorer (juste une idée pour le déboguer). Peut-être l'ajouter dans https://snack.expo.io ? ou github, je vais vous aider à déboguer.
Merci, j'ai testé (presque) textuellement l'exemple en utilisant la documentation React-Test-Renderer. (Je viens de changer
en
.) Toujours la même erreur (impossible de trouver
). Un expo Snack n'aiderait pas, car le code fonctionne dans une application react-native init
ou expo init
(et donc aussi dans un Snack). Le problème est de faire exécuter React Native en dehors d'un projet RN.
Selon la documentation , " À partir de react- native version 0.38, une configuration Jest est incluse par défaut lors de l'exécution de react-native init. ".
Et
" react-native est livré avec un preset Jest, donc le Le champ jest.preset de votre package.json doit pointer vers react-native. Le préréglage est un environnement de nœud qui imite l'environnement d'une application React Native. Comme il ne charge aucun DOM ni API de navigateur, il améliore considérablement le temps de démarrage de Jest . "
Le fait est que Jest est censé fonctionner avec React-Native, et riteway
ne l'est pas. Lorsque vous exécutez react-native init
, la dépendance suivante est ajoutée: "jest-react-native"
. Et un préréglage de plaisanterie est ajouté à package.json
:
"jest": { "preset": "react-native" }
Apparemment, il n'y a pas encore de préréglage pour riteway.
p>
Je pense que riteway n'est pas le problème. Le problème est de faire fonctionner React Native. C'est probablement plus un problème Babel.
C'est pourquoi jest fonctionne avec react-native
: github.com/facebook/react-native/blob/master/jest/setup.js . Ligne 42
Voir également ceci: stackoverflow.com/questions/45717910/...
Pouvez-vous partager votre
package.json
? et les préréglages Babel sont-ils ajoutés à.babelrc
oubabel.config.js
?@PritishVaidya J'ai ajouté le
package.json
. C'est un.babelrc
.Vous n'avez pas inclus le code réel, donc cela semble fondamentalement irréfutable. Quel est le code qui fait référence à
View
? Qu'est-ce queView
lui-même? Comment le chargez-vous?@loganfsmyth J'ai édité la question. Faites-moi savoir si cela aide, je suis toujours coincé avec cela 😕 Merci pour votre aide!