Как мне провести модульное тестирование этого компонента React?

Это моя составляющая. По сути, это оболочка для другого компонента. У меня вопрос: как мне провести модульное тестирование этого компонента? Помимо проверки состояния и вызова двух методов и проверки того, что они обновляют состояние.

Кроме того, кажется, что это просто рендеринг реквизита / состояния, так есть ли необходимость это тестировать?

import React from 'react';
import { PropTypes as PT } from 'prop-types';

export default Wrapped =>
  class extends React.Component {
    static propTypes = {
      numOne: PT.number,
    };

    constructor(props) {
      super(props);

      this.state = {
        showModal: false,
      };
    }

    openModal = () => {
      this.setState({
        showModal: true,
      });
    };

    closeModal = () => {
      this.setState({
        showModal: false,
      });
    };

    render() {
      return (
        <Wrapped
          numberValue = {this.props.numOne}
          showHolidayModal = {this.state.showHolidayListModal}
          showModal = {this.openModal}
          closeModal = {this.closeModal}
          {...this.props}
        />
      );
    }
  };

Это мой компонент (просто пример), который я также тестирую, он отображает то, что передается в

import React from 'react';
import { PropTypes as PT } from 'prop-types';
import container from './container';
import { Card, Button, Modal } from '../common';

export const Leave = props => {
  return (
    <div>
      <span>Dummy data : {props.numberValue}</span>
      {props.showModal && <Modal />}

      <Button onClick = {props.closeModal} label = "close" />
    </div>
  );
};

Leave.propTypes = {
  numberValue: PT.number,
  showModal: PT.bool,
  openModal: PT.func,
  closeModal: PT.func,
};

export default container(Leave);

ваш компонент Wrapped отображает внутри себя Wrapped? Это бесконечная рекурсия?

Murilo Cruz 05.06.2018 19:04

Нет, работает нормально. См. Строку «экспорт контейнера по умолчанию (Оставить)». Моя команда решила использовать структуру функций высшего порядка для наших компонентов.

coding123 05.06.2018 19:05
Поведение ключевого слова "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) для оценки ваших знаний,...
2
2
41
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

Может быть что-то вроде этого. Вы должны протестировать оболочку для рендеринга обернутого компонента с его реквизитами. Также проверьте свои функции, обновляющие состояние.

const Bar = props => <span />
const Test = container(Bar)
const wrapper = shallow(<Test prop1 = {1} prop2 = {2}>)

const bar = wrapper.find(Bar)
expect(bar).to.have.length(1)
expect(bar.props()).contains({ prop1: 1, prop2: 2})

bar.props().showModal()
expect(wrapper.state().showModal).to.be(true)

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