Реквизиты не проходят внутри компонента в тестовых примерах, написанных с помощью Jest и Enzyme

Это мой тестовый пример

import React from 'react';
import { mount } from 'enzyme';
import CustomForm from '../index';

describe('Custom Form mount testing', () => {
  let props;
  let mountedCustomForm;
  beforeEach(() => {
    props = {
      nav_module_id: 'null',
    };
    mountedCustomForm = undefined;
  });

  const customform = () => {
    if (!mountedCustomForm) {
      mountedCustomForm = mount(
        <CustomForm {...props} />
    );
    }
    return mountedCustomForm;
  };

  it('always renders a div', () => {
    const divs = customform().find('div');
    console.info(divs);
  });
});

Всякий раз, когда я запускаю тестовый пример с помощью yarn test. Выдает следующую ошибку TypeError: Cannot read property 'nav_module_id' of undefined.

Я уже разместил консоль в нескольких местах, чтобы увидеть ценность реквизита. Он готовится. Но он не мог просто пройти через компоненты и выдать указанную выше ошибку.

Любая помощь была бы оценена, застряла почти на 2-3 дня.

reactjs jestjs enzyme

29.10.2018 13:53

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

947

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

Вы должны обернуть компонент, который вы хотите протестировать, в метод beforeEach, чтобы он стал доступным для всех блоков «it», а также вы должны взять фиктивные реквизиты, которые, по вашему мнению, попадают в исходный компонент.

import React from 'react'
import {expect} from 'chai'
import {shallow} from 'enzyme'
import sinon from 'sinon'
import {Map} from 'immutable'
import {ClusterToggle} from '../../../src/MapView/components/ClusterToggle'

describe('component tests for ClusterToggle', () => {

let dummydata

  let wrapper

  let props

  beforeEach(() => {

    dummydata = {
      showClusters: true,
      toggleClustering: () => {}
    }

    wrapper = shallow(<ClusterToggle {...dummydata} />)

    props = wrapper.props()

  })

  describe(`ClusterToggle component tests`, () => {

    it(`1. makes sure that component exists`, () => {
      expect(wrapper).to.exist
    })

    it('2. makes sure that cluster toggle comp has input and label', () => {
      expect(wrapper.find('input').length).to.eql(1)
      expect(wrapper.find('label').length).to.eql(1)
    })

    it('3. simulating onChange for the input element', () => {
      const spy = sinon.spy()
      const hct = sinon.spy()
      hct(wrapper.props(), 'toggleClustering')
      spy(wrapper.instance(), 'handleClusterToggle')
      wrapper.find('input').simulate('change')
      expect(spy.calledOnce).to.eql(true)
      expect(hct.calledOnce).to.eql(true)
    })
  })
})

29.10.2018 14:14

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

Ошибка инвариантного нарушения во время тестирования реагирующего компонента, который потребляет опору из контекста api

Как вы можете проверить, сфокусирован ли ввод с помощью утилит Vue Test?

Как написать тестовые примеры Jest для компонентов контейнера React?

Может шутить о выводе журнала консоли в выводе тестового блока

Как отлаживать модульные тесты Vue CLI 3 с помощью WebStorm? Отладчик не достигает точки останова

Jest не может проверить состояние React

Новичок в VSCode: удаленная отладка Jest / Node через Docker

Контекстное API HOC Модульное тестирование

Модуль Jest mock для однократного импорта

Утверждения async jest не проходят проверку, но в выходных данных теста выводится сообщение об ошибке

Реквизиты не проходят внутри компонента в тестовых примерах, написанных с помощью Jest и Enzyme

Ответы 1

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

Похожие вопросы