CODEWITHSUNDEEP
reactjsjestjsenzyme
Harvey
Harvey

Reputation: 572

Testing if onBlur is called

I've been searching how to do this for 2 hours, but couldn't make it work. I have a class called base text, which renders an input field. I'm trying to test if onBlur function is called. But I can't make the test pass. I'm getting a

TypeError: Cannot read property '_isMockFunction' of undefined

Is there any way to test if onBlur function is called with mock?

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();
      });
    });

Upvotes: 0

Views: 4733

Answers (1)

Matthis
Matthis

Reputation: 131

Your component BaseText doesn't have a method called onBlur but looseFocus.

You should try to spy looseFocus on your instance and see if it is called when you simulate a blur event.

A Codesandbox from your code : https://codesandbox.io/s/ovjwnln4o9

Upvotes: 1

Related Questions