Как имитировать переменные конструктора в файле тестовых примеров js?

У меня есть класс с именем SelectedValues, как показано ниже, который имеет глобальную переменную "this.others"

export default class SelectedValues extends React.Component {

  /* istanbul ignore next */
  constructor(props) {
    super(props);
    this.renderOption = this.renderOption.bind(this);
    this.deselectOption = this.deselectOption.bind(this);
    this.others= [];
    this.state = {
      typedText: '',
      index: null,
      typedContext: '',
    };
  }
  
 deselectOption(event, option, index){
    const selectedOptions = _.clone(this.props.value);
    let selectedOptionsValue = _.split(selectedOptions.value, ';');

    selectedOptionsValue.splice(index, 1);
    console.info(this.others);
    let othersIndex =  this.others[index].OtherIndex;

    let typedUpdateContext = '';
    if (othersIndex === 0){
      let temp = this.others.find(item => item.OtherIndex === 1);
      typedUpdateContext = temp? temp.value : '';
    }

    _.remove(this.others, { 'key': option + index });
  }

  render(){
     return(...);
  }
}

Код работает нормально, но когда я запустил тестовый файл, используя npm run test для вышеуказанного метода «deselectOption», я получаю сообщение об ошибке, как показано ниже. TypeError: Cannot read property 'OtherIndex' of undefined

Позже я обнаружил, что проблема возникает из-за this.others (глобальная переменная), и это пустой массив. Итак, как издеваться над «this.others», прежде чем я вызову метод deselectOption в тестовом файле.

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

Заранее спасибо.

Какую библиотеку для тестирования реакции вы используете? Как правило, когда вы получаете экземпляр компонента, вы можете присвоить фиктивное значение свойству others.

Lin Du 10.12.2020 12:50

@slideshowp2 Я использую мокко для тестирования. Это вы спрашиваете?

akhil 10.12.2020 13:23

@slideshowp2 спасибо, ваш ответ полезен, я могу поиздеваться над экземпляром.

akhil 10.12.2020 14:09
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
2
3
664
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

Спасибо @slideshowp2 за предложение, я могу смоделировать данные в своем тестовом файле после получения экземпляра компонента.

Итак, other - это переменная конструктора. Чтобы издеваться над этой переменной, я выполнил описанный ниже процесс, и это сработало для меня.

const wrapper = shallow(<SelectedValues value = {input} onChange = {onChangeSpy} />);
    const instance = wrapper.instance();
  //Below i am mocking "others" variable
   instance['others'] = [
    {
      'key':'Add 10 statements0',
      'value':'Add 10 statements',
      'OtherIndex': null
    },
    {
      'key':'Verify bank statements1',
      'value':'Verify bank statements',
      'OtherIndex': null
    },
    {
      'key':'Other2',
      'value':'loan',
      'OtherIndex': 1
    }
   ];

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