Блог

Главная - Вопросы по программированию - Как имитировать переменные конструктора в файле тестовых примеров react js?

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

#reactjs #unit-testing #mocha.js

#reactjs #модульное тестирование #mocha.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.log(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 для вышеупомянутого метода «Отмены выбора», и я получаю ошибку, как показано ниже
TypeError: Cannot read property 'OtherIndex' of undefined

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

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

Заранее благодарю.

Комментарии:

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

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

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

Ответ №1:

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

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

 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
    }
   ];