react js测试用例文件中如何模拟构造函数变量？

Question

我有如下所示的名为 SelectedValues 的 class，它有一个全局变量“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(...);
  }
}

代码工作正常，但是当我运行通过对上述“deselectOption”方法使用 npm run test 测试文件时，出现如下错误 TypeError: Cannot read property 'OtherIndex' of undefined

后来我发现这个问题是因为this.others（这是一个全局变量）而且它是一个空数组。那么如何在我调用测试文件中的 deselectOption 方法之前模拟“this.others”。

我是单元测试用例编写测试用例的新手。请帮我解决这个错误。

提前致谢。

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

react js测试用例文件中如何模拟构造函数变量？

How mock constructor variables in react js test cases file?

unit-testing

mocha.js

reactjs