3
votes

Chargement de React Native: UnhandledPromiseRejectionWarning: Erreur: Impossible de trouver le module 'View'

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 commentaires

Pouvez-vous partager votre package.json ? et les préréglages Babel sont-ils ajoutés à .babelrc ou babel.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 que View 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!


4 Réponses :


1
votes

Supprimez les modules de nœuds et réinstallez

rm -rf node_modules
npm install


3 commentaires

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



0
votes

Vous ne retournez rien, vous devez renvoyer une "Vue"


0 commentaires

0
votes

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.


1 commentaires

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.



1
votes

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>


3 commentaires

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/...