Запуск mount () в собственном реагировании. Невозможно?

Этот пост следует за моим предыдущим вопросом:

предыдущий вопрос

Я столкнулся с тестом, который требует, чтобы я запустил mount в react native. Я в шутку просмотрел документацию и обнаружил, что перед запуском набора тестов вам необходимо настроить тестовую среду, способную запускать jsdom для работы монтирования:

Ссылка на документы: тестовая среда

Из-за ужасной документации. Я не могу понять, как создать класс customEnvironment и что после этого? что мне делать с глобальным объектом? Как использовать это в моем тестовом файле, который сейчас выглядит так:

describe('Estimate', () => {
  test('Estimate component Exists', () => {
    const onPressFunction = jest.fn()
    const obj = shallow(
      <Estimate onPress = {onPressFunction} />
    )
    expect(obj.find('TextInput').exists()).toBe(true)
  })

  test('Estimate returns value on button press', () => {
    const onPressFunction = jest.fn()
    const obj = shallow(
      <Estimate onPress = {onPressFunction} />
    )
    obj.find('TextInput').first().simulate('keypress', { key: '1' })
    obj.find('Button').first().props().onPress()
    expect(onPressFunction.toHaveBeenCalledWith('1'))
  })
})

Вы читали jestjs.io/docs/en/tutorial-react-native?

user2266462 13.09.2018 00:43

Это работает как принятый ответ, но дает сбой для большого производственного проекта.

Manish Jain 17.10.2019 02:54
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
3
2
1 956
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я просто заставил это работать, нужно было импортировать три пакета из npm:

  1. jsdom
  2. реагировать-родной-макет-рендерер
  3. шутка-среда-jsdom

Также мой файл setup.mjs выглядит так:

// @note can't import shallow or ShallowWrapper specifically
import Enzyme from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'
// eslint-disable-next-line
import { format } from 'prettier'

Enzyme.configure({ adapter: new Adapter() })

// Make Enzyme functions available in all test files without importing
global.shallow = Enzyme.shallow

Enzyme.ShallowWrapper.prototype.jsx = function jsx () {
  const placeholder = '{ something: null }'
  const obj = this.debug({ ignoreProps: false, verbose: true }).replace(/{\.\.\.}/g, placeholder)

  return format(obj, {
    parser: 'babylon',
    filepath: 'test/setup.mjs',
    trailingComma: 'all',
    semi: false,
    arrowParens: 'always',
  })
    .replace(new RegExp(placeholder, 'g'), '{...}')
    .replace(';<', '<')
}
// the html function just throws errors so it's just reset to be the jsx function
Enzyme.ShallowWrapper.prototype.html = Enzyme.ShallowWrapper.prototype.jsx

jest.mock('react-native-device-info', () => {
  return {
    getDeviceLocale: () => 'en',
    getDeviceCountry: () => 'US',
  }
})

jest.mock('react-native-custom-tabs', () => ({
  CustomTabs: {
    openURL: jest.fn(),
  },
}))

jest.mock('react-native-safari-view', () => ({
  isAvailable: jest.fn(),
  show: jest.fn(),
}))



const { JSDOM } = require('jsdom')


const jsdom = new JSDOM()
const { window } = jsdom
function copyProps (src, target) {
  const props = Object.getOwnPropertyNames(src)
    .filter((prop) => typeof target[prop] === 'undefined')
    .map((prop) => Object.getOwnPropertyDescriptor(src, prop))
  Object.defineProperties(target, props)
}

global.window = window
global.document = window.document
global.navigator = {
  userAgent: 'node.js',
}
copyProps(window, global)
Enzyme.configure({ adapter: new Adapter() })

// Ignore React Web errors when using React Native
// allow other errors to propagate if they're relevant
const suppressedErrors = /(React does not recognize the.*prop on a DOM element|Unknown event handler property|is using uppercase HTML|Received `true` for a non-boolean attribute `accessible`|The tag.*is unrecognized in this browser)/
const realConsoleError = console.error
console.error = (message) => {
  if (message.match(suppressedErrors)) {
    return
  }
  realConsoleError(message)
}
require('react-native-mock-render/mock')

Тест выглядит так:

 test('Estimate returns value on button press', () => {
    const onPressFunction = jest.fn()
    const tree = mount(
      <Estimate onPress = {onPressFunction} />
    )
    console.info(tree.children().first().html())
  })

Работает как шарм!

Спасибо тебе за это! Супер полезно

Emmanuel Orozco 25.04.2019 18:02

Не могли бы вы немного объяснить свой установочный файл? Какие макеты необходимы, например, react-native-safari-view?

Ghayoor ul Haq 15.05.2020 13:01

Другие вопросы по теме