测试onBlur是否被调用

时间:2018-10-18 13:09:22

标签: reactjs jestjs enzyme

2个小时以来,我一直在搜索操作方法,但无法正常进行。我有一个称为基础文本的类,该类呈现一个输入字段。我正在尝试测试是否调用了onBlur函数。但是我无法通过测试。我正在

  

TypeError:无法读取未定义的属性'_isMockFunction'

有没有办法测试onBlur函数是否被模拟调用了?

BaseText.js

looseFocus = event => {
    const { value } = event.target;
    const { mustEnter, mustFill, limit } = this.props;
    if (mustEnter) {
      if (value.length < 1) {
        alert('Missing info.');
      }
    }
    if (mustFill && limit > 0) {
      if (value.length < limit) {
        alert('Missing info.');
      }
    }
  };

  render() {
    const {
      /...constants
    } = this.props;
    const { value } = this.state;
    return visible ? (
      <Input
        disabled={disabled}
        placeholder={text}
        name={name}
        value={value}
        onChange={this.handleChange}
        onBlur={this.looseFocus}
        style={Styles}
        minLength={minLength}
        exception={exception}
        mustEnter={mustEnter}
        // prefix={this.props.prefix}
        type={type}
        maxLength={limit < 0 ? null : limit}
        //    menuRef={this.props.menuRef}
        //    zeroPad={this.props.zeroPad}
      />
    ) : null;
  }
}

BaseText.test.js

const defaultBaseText = shallow(<BaseText />);

    describe('BaseText should make a function call on blur.', () => {
      it('blur it', () => {
        const instance = defaultBaseText.instance();
        const spy = jest.spyOn(instance, 'onBlur');

        instance.forceUpdate();

        const p = defaultBaseText.find('Input');
        p.simulate('blur');
        expect(spy).toHaveBeenCalled();
      });
    });

1 个答案:

答案 0 :(得分:1)

您的组件BaseText没有名为onBlur的方法,而是looseFocus

您应该尝试在实例上监视looseFocus,并在模拟模糊事件时查看它是否被调用。

您的代码中的一个Codesandbox:https://codesandbox.io/s/ovjwnln4o9