adminРазное

Enzyme mount: Page not found · GitHub Pages

Памятка по ферментам

Начало работы

Введение

Enzyme позволяет писать модульные тесты для компонентов React. Это руководство охватывает Enzyme 3.x.

  • Веб-сайт Enzyme (enzymejs.github.io)

Крепление 

 import {shallow, mount} из 'enzyme'
 
 обертка = мелкая ()
 
 обертка = монтирование ()

Неглубокая упаковка не спускается к подкомпонентам.
Полное крепление также монтирует подкомпоненты.

См.: Поверхностный рендеринг,
Полный рендеринг

Отладка 

 console.log(wrap.debug())

Показывает HTML для целей отладки.

См.: отладка()

Примеры

Базовый пример 

 import {мелкий} из 'энзима'
импортировать MyComponent из '../MyComponent'
 
 это('работает', () => {
  константная обертка = мелкая (
    
  )
  ожидать(обернуть.текст()). toEqual('Я Грут')
})

Реквизит и состояние

Настройка 
 wrap.setProps({имя: 'Мо'})
wrap.setState({показать: правда})
Утверждение 
 ожидать(обернуть.prop('имя')).toEqual('Мо')
ожидать(обернуть.состояние('показать')).toEqual(истина)
 
 ожидать('имя' в wrap.props()).toEqual('Мо')
ожидать('показать' в wrap.state()).toEqual(true)

Соответствующие элементы 

 ожидать(
  wrap.containsMatchingElement(
    Я грут
  )
).toBeTruthy()

содержитMatchingElement() , пожалуй, самое полезное утверждение в Jest.

снимков 

 ожидать(обернуть).toMatchSnapshot()

Убедитесь, что вы настроили энзим-в-json для моментальных снимков (см. Установка ниже).

Траверсы 

 ожидать(
  wrap.find('кнопка').text()
).toEqual('Отправить')

Используйте .find() для перехода к узлам. Он также вернет объекты-оболочки.

Моделирование событий 

 wrap. find('ввод').simulate('щелчок')
С реквизитами объекта события 
 wrap.find('input').simulate('change', {
  цель: {значение: 'привет'}
})

Установка

Первоначальная настройка 

 npm install --save-dev фермент \
  фермент-адаптер-реагировать-16 \
  Реакция-тест-рендерер
тест/setup.js 
 импорт фермента из «энзима»
импортировать адаптер из 'enzyme-adapter-react-16'
Enzyme.configure({адаптер: новый адаптер() })
package.json 
 "шутка": {
  "файлы установки": [
    "тест/setup.js"
  ]
}

Это настраивает Enzyme для React v16, а Jest автоматически настраивает Enzyme для вас. В инструкциях по установке Enzyme есть и другие адаптеры.

См.: Установка

Шуточные снимки 

 npm install --save-dev энзим-в-json
package.json 
 "шутка": {
  "моментальные сериализаторы": [
    "энзим-в-json/сериализатор"
  ]
}
Тест 
 это('работает', () => {
  обернуть = монтировать (<МойКомпонент/>)
  ожидать(обернуть). toMatchSnapshot()
})

Необязательно, но рекомендуется: позволяет использовать оболочки Enzyme со снимками Jest.

См.: фермент-в-json

РеактВраппер

Траверс 

 wrap.find('кнопка') // → ReactWrapper
wrap.filter('кнопка') // → ReactWrapper
wrap.not('span') // → ReactWrapper (инверсия filter())
wrap.children() // → ReactWrapper
wrap.parent() // → ReactWrapper
wrap.closest('div') // → ReactWrapper
wrap.childAt(0) // → ReactWrapper
wrap.at(0) // → ReactWrapper
wrap.first() // → ReactWrapper
wrap.last() // → ReactWrapper
 
 wrap.get(0) // → ReactElement
wrap.getElement() // → ReactElement
wrap.getElements() // → Массив
wrap.getDOMNode() // → DOMComponent

См.: Полный API рендеринга

Действия 

 wrap.simulate('щелчок')

Компоненты React 

 wrap.setState({ ··· })
wrap.setProps({ ··· })
wrap.setContext({ ··· })
 
 wrap.state() // получить полное состояние
wrap. props() // получить полный реквизит
wrap.context() // получить полный контекст
 
 wrap.state('ключ') // → любой
wrap.prop('key') // → любой
wrap.context('key') // → любой
 
 wrap.instance() // → ReactComponent

Крепление 

 обертка.mount()
обернуть.размонтировать()
wrap.update() // вызывает forceUpdate()

Тесты 

 wrap.debug() // → строка
wrap.html() // → строка
wrap.text() // → строка
wrap.type() // → строка | функция
wrap.name() // → строка
wrap.is('.classname') // → логическое значение
wrap.hasClass('класс') // → логическое значение
wrap.exists() // → логическое значение
wrap.contains(
) // → логическое значение
wrap.contains([ 
 ]) // → логическое значение
wrap.some('.child') // → логическое значение
wrap.someWhere(n => n.hasClass('foo'))
wrap.containsMatchingElement(
) // → логическое значение
wrap.containsAllMatchingElements([ 
 ]) // → логическое значение
wrap.containsAnyMatchingElements([ 
 ]) // → логическое значение

Ссылки

  • Веб-сайт Enzyme (airbnb. io)
  • Шпаргалка Enzyme v2 (devhints.io) (старая версия)

энзим.mount Примеры кода JavaScript и Node.js 

  const wrapper = mount(
  <Страница экономии топлива
  действий={действий}
  константная оболочка = монтирование(
  <Страница экономии топлива
  действий={действий}
 
  описать('Компонент AddToFavourites', () => {
  const comp = 
 
  it('должен соответствовать снимку', () => {
  константное дерево = создать (комп).toJSON()
  ожидать(дерево).toMatchSnapshot()
  })
 
  it('должен имитировать действие добавления в избранное при нажатии', () => {
  const обертка = mount(comp)
 
  wrapper. find('SecondaryButton').simulate('click', { preventDefault() {} })
  })
  })
 
  описать('Компонент RefreshExplores', () => {
  постоянная комп = (
  <Хранилище поставщика={mockStore}>
  
  
  )
 
  it('должен соответствовать снимку', () => {
  константное дерево = создать (комп).toJSON()
  ожидать(дерево).toMatchSnapshot()
  })
 
  it('должен имитировать действие обновления при нажатии', () => {
  const обертка = mount(comp)
  wrapper. find('a.exp_refresh').simulate('click', { preventDefault() {} })
  })
  })
 
  описать('Компонент боковой панели', () => {
  const comp = 
  пусть элемент данных
 
  beforeAll(() => (dataElement = MockDataElement()))
 
  afterAll(() => dataElement.remove())
 
  it('должен совпадать со снимком, а администратор должен выйти из системы', () => {
  константное дерево = создать (комп).toJSON()
  ожидать(дерево).toMatchSnapshot()
 
  const обертка = mount(comp)
  ожидать (wrapper. find('.m_n_a_admin').exists()).toBe(true)
  })
 
  it('должна имитировать действие admin-logout при нажатии', () => {
  dataElement.setAttribute('data-isadmin', 'true')
  const обертка = mount(comp)
 
  wrapper.find('.admin-logout').simulate('click', { preventDefault() {} })
  })
  })
 
  описать('Компонент входа администратора', () => {
  пусть dataElement = MockDataElement()
 
 константа комп = (
  <Хранилище поставщика={mockStore}>
  
  
  )
 
  it('должен соответствовать снимку', () => {
  константное дерево = создать (комп). toJSON()
  ожидать(дерево).toMatchSnapshot()
  })
 
  it('следует имитировать действие отправки входа в систему', () => {
  const обертка = mount(comp)
  wrapper.find('form').simulate('submit', {preventDefault() {} })
  })
 
  it('следует перенаправить на маршрут /is-admin, когда пользователь является администратором', () => {
  dataElement.setAttribute('data-isadmin', 'true')
  const wrapper = small()
  ожидать (wrapper.find('Redirect').exists()).toBe(true)
  })
  })
 
  обертка const = mount(comp)
  wrapper. find('Изображение галереи').simulate('щелчок')
 
  const wrapper = mount(comp)
  wrapper.find('SecondaryButton').simulate('щелчок')
  })
  const обертка = mount(comp)
  обертка
  .find('.t_a_tag')
 
  описать('Компонент ExplorePhotoGallery', () => {
  const comp = 
 
  // неглубокий снимок
  it('должен соответствовать снимку', () => {
  const tree = мелкое (комп.)
  ожидать(дерево).toMatchSnapshot()
  })
 
  it('показать показать галерею', () => {
  const обертка = мелкая (комп. )
  ожидать(обертка.найти('Ничего').существует()).быть(ложь)
  ожидать(обертка.найти('Галерея').существует()).быть(истина)
  ожидать(обертка.найти('Галерея').prop('фотографии').длина).toBe(1)
  })
 
  it('должен показывать  при нажатии на фотографию из галереи', () => {
  const обертка = mount(comp)
  wrapper.find('Изображение галереи').simulate('щелчок')
 
  пусть imgTheatre = wrapper.find('ImageTheatre')
  ожидать(imgTheatre.exists()).toBe(true)
  })
 
  it('должен показывать  когда photos.length == 0', () => {
  const wrapper = small()
  ожидать(обертка. найти('Ничего').существует()).быть(истина)
  ожидать(обертка.найти('Галерея').существует()).быть(ложь)
  })
  })
 
  описать('Компонент отмены подписки', () => {
  константные реквизиты = {
  пользователей: 7,
  отписался() {},
  }
 
  it('должен соответствовать снимку', () => {
  const tree = create().toJSON()
  ожидать(дерево).toMatchSnapshot()
  })
 
  it('должно имитировать отмену подписки при нажатии', () => {
  const wrapper = mount( ..props} store={mockStore} />)
  wrapper.find('PrimaryButton').simulate('щелчок')
  })
  })
 
  описать('Компонент заголовка', () => {
  const comp = <Заголовок />
 
 it('должен соответствовать снимку', () => {
  константное дерево = создать (комп).toJSON()
  ожидать(дерево).toMatchSnapshot()
  })
 
  it('должны показывать параметры при нажатии', () => {
  const обертка = mount(comp)
 
  ожидать (wrapper.find('HeaderOptions').exists()).toBeFalse()
  wrapper.find('.show_more').simulate('щелчок')
  ожидать (wrapper. find('HeaderOptions').exists()).toBeTrue()
  })
  })
 
  описать('Компонент загрузки-аватара', () => {
  const comp = 
 
  it('должен соответствовать снимку', () => {
  константное дерево = создать (комп).toJSON()
  ожидать(дерево).toMatchSnapshot()
  })
 
  it('должен имитировать событие изменения в файле', () => {
  const обертка = mount(comp)
 
  // событие изменения
  константный файл = новый большой двоичный объект (['foo'], {
  тип: 'текст/обычный',
  })
  константа mockedEvent = {
  цель: {
  файлов: [файл],
  },
  }
  wrapper. find('input[type="file"]').simulate('change', mockedEvent)
 
  // должен присутствовать предварительный просмотр-аватар, так как fileAvatarChanged=true
  ожидать (wrapper.find('PreviewAvatar').exists()).toBe(true)
  })
  })
 
  обертка const = mount(comp)
  wrapper.find('Изображение галереи').simulate('щелчок')
 
  описать('Компонент AdvancedUnfollow', () => {
  константные реквизиты = {
  пользователь: 7,
  отписался() {},
  }
 
  it('должен соответствовать снимку', () => {
  константное дерево = создать(
   ..props} store={mockStore} />
  ).toJSON()
  ожидать(дерево).toMatchSnapshot()
  })
 
  it('должно имитировать отмену подписки при нажатии', () => {
  const wrapper = mount()
  wrapper.find('PrimaryButton').simulate('щелчок')
  })
  })
 
  описать('Следовать за компонентом', () => {
  константные реквизиты = {
  Детали пользователя: {
  пользователей: 7,
  имя пользователя: 'галиб',
  имя: 'Мирза',
  фамилия: 'Галиб',
  },
  следует() {},
  }
 
  it('должен соответствовать снимку', () => {
  const tree = create(

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *