Загрузка React Native: UnhandledPromiseRejectionWarning: Ошибка: не удается найти модуль «Просмотр»

Я пытаюсь внести свой вклад в библиотеку тестирования. Библиотека должна предоставлять оболочку для react-test-renderer, например react-native-testing-library делает.

Чтобы проверить, работает ли мой код, я написал простой модульный тест, используя код, написанный для библиотеки. Поскольку это был первый тест для React Native, я добавил react-native в качестве зависимости от разработчиков вместе с metro-react-native-babel-preset. Кроме того, я добавил пресет в babel.

{
  "presets": [
    [
      "env",
      {
        "targets": {
          "browsers": ["last 2 versions", "safari >= 7"]
        }
      }
    ],
    "react",
    "module:metro-react-native-babel-preset"
  ]
}

Библиотека выполняет свои утверждения, используя ленту.

Теперь каждый тест (npm test) выдает ошибку:

> 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

Когда я удаляю предустановку из конфигурации babel, я получаю сообщение об ошибке:

(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)

Как я могу заставить компоненты React Native работать в моем тесте в библиотеке (и вне проекта expo init или react-native init?

РЕДАКТИРОВАТЬ: я обнаружил, что репозиторий использует Babel 6, поэтому предустановка метро не работает. Поэтому я заменил его на babel-preset-react-native, и теперь я вернулся к исходной ошибке, что View не может быть найден.

РЕДАКТИРОВАНИЕ 2: package.json

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

РЕДАКТИРОВАТЬ 3: Извините, видимо, я не включил свой код, хотя он полезен для решения этой проблемы. Это довольно просто. Я просто пытаюсь отрендерить <View />, используя ReactTestRenderer.

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
  });
});

person J. Hesters    schedule 23.02.2019    source источник
comment
Можешь поделиться своим package.json ? и добавлены ли пресеты Babel в .babelrc или babel.config.js?   -  person Pritish Vaidya    schedule 27.02.2019
comment
@PritishVaidya Я добавил package.json. Это .babelrc.   -  person J. Hesters    schedule 28.02.2019
comment
Вы не включили фактический код, так что это кажется практически неразрешимым. Какой код ссылается на View? Что такое View? Как вы его загружаете?   -  person loganfsmyth    schedule 03.03.2019
comment
@loganfsmyth я отредактировал вопрос. Дайте мне знать, если это поможет, я все еще застрял с этим ???? Спасибо за любую помощь!   -  person J. Hesters    schedule 03.03.2019


Ответы (4)


Согласно документам, "Начиная с реактивной версии 0.38 , настройка Jest включена по умолчанию при запуске реактивной инициализации.".

А также

"React-native поставляется с предустановкой Jest, поэтому поле jest.preset вашего package.json должно указывать на react-native. Предустановка представляет собой среду узла, которая имитирует среду приложения React Native. не загружайте DOM или API браузера, это значительно сокращает время запуска Jest."

Дело в том, что Jest должен работать с React-Native, а riteway — нет. При запуске react-native init добавляется следующая зависимость: "jest-react-native". А в package.json добавлен шуточный пресет:

"jest": {
   "preset": "react-native"
}

Судя по всему, для riteway пока нет предустановки.

person diogenesgg    schedule 06.03.2019
comment
Я думаю, что riteway не является проблемой. Проблема заключается в том, чтобы запустить React Native. Вероятно, это больше проблема Вавилона. - person J. Hesters; 06.03.2019
comment
Вот почему jest работает с react-native: github.com/facebook/react -native/blob/master/jest/setup.js . Строка 42 - person diogenesgg; 06.03.2019
comment
Также см. это: найти представление модуля во время тестирования, реагировать на родной язык с помощью jasmine и typescript"> stackoverflow.com/questions/45717910/ - person diogenesgg; 06.03.2019

Удалите модули узла и установите снова

rm -rf node_modules
npm install
person Hrishi    schedule 04.03.2019
comment
Я бы посмеялся, если бы это сработало, но нет, та же ошибка: UnhandledPromiseRejectionWarning: Error: Cannot find module 'View'. Спасибо, подумал! - person J. Hesters; 04.03.2019
comment
У меня тоже была такая же проблема, но как-то это сработало для меня - person Hrishi; 04.03.2019
comment
это сработало для меня: узел P: v14.15.1 npm: 6.14.8 пряжа: 1.22.4 выставка: ~39.0.2 - person Michael Guild; 29.11.2020

Вы ничего не возвращаете, вам нужно вернуть "Просмотр"

person Mr. Strike    schedule 05.03.2019

Вы можете просто использовать предложенный пример в https://reactjs.org/docs/test-renderer.html просто чтобы убедиться, что в коде, который вы написали, все в порядке, а затем добавьте свою собственную логику, чтобы улучшить его (просто идея для его отладки). Может добавить его в https://snack.expo.io? или github, я помогу вам отладить.

person Subhendu Kundu    schedule 05.03.2019
comment
Спасибо, я (почти) дословно протестировал пример, используя документы React-Test-Renderer. (Я только что изменил <Link /> на <View />.) Все та же ошибка (не могу найти <View />). Expo Snack не поможет, потому что код работает в приложении react-native init или expo init (и, следовательно, в Snack тоже). Проблема заключается в том, чтобы заставить React Native работать вне проекта RN. - person J. Hesters; 05.03.2019