Test a callback Function using jest and enzyme in ReactJS?

Question

I am new to TDD and I want to test my callback function in my Age component : my Age.js file is following :

import React, { Component } from "react";
import { connect } from "react-redux";
import actions from "../../actions";
import TextFieldComponent from "../Module/TextFieldComponent";

export class Age extends Component {

  ageValueCallBack = age => {
    console.log("value is : ", age);
    this.props.selectAgeAction(age)
  };

  render() {
    const props = {
      onChange: this.ageValueCallBack,
      hintText : 'Eg. 25',
      floatingLabelText: "Age(Years)",
      value : (this.props.usersData) ? this.props.usersData.basic.age : null
    };
    return <TextFieldComponent {...props} />;
  }
}

function mapStateToProps({ usersData }) {
  return {
    usersData
  };
}

export default connect(mapStateToProps, {
  selectAgeAction: actions.selectAgeValue
})(Age);

where my TextFieldComponent is following :

import TextField from "material-ui/TextField";

const TextFieldComponent = props => {
  return (
    <TextField
        onChange={(event, string) => {
        props.onChange(string)
      }}
      floatingLabelText={props.floatingLabelText || "floatingLabelText"}
      value={props.value || null}
      hintText={props.hintText || "hintText will be here"}
      autoFocus ={true || props.autoFocus}
    />
  );
};

I want to test ageValueCallBack function of Age component but I'm not getting any particular method to reach there.

Any insight will be helpful.

Thanks..

What you have to do is that you need a spy, sinonJs is good for that job. So when you render Age component, prop selectAgeAction="the sinon spy". Also you need to make an onChangeEvent on your TextField, and then assert against the sinon spy. sinonjs.org/releases/v4.0.1/spies — Knut Erik Lødding
– Knut Erik Lødding, Commented Oct 13, 2017 at 5:14

n00dle · Accepted Answer · 2020-05-08 16:19:59Z

9

With enzyme you can trigger the onChange event on the TextFieldComponent using simulate('change', {}, 'someString'). The selectAgeAction in your Age.js needs to be a spy created with jest.fn():

const selectAgeAction = jest.fn()
const component = shallow(<Age selectAgeAction={selectAgeAction} />)
component.find('TextField').simulate('change', {}, '10')
expect(selectAgeAction).toHaveBeenCalledWith('10')

edited May 8, 2020 at 16:19

n00dle

6,0632 gold badges40 silver badges49 bronze badges

answered Oct 13, 2017 at 14:48

Andreas Köberle

112k58 gold badges281 silver badges308 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

LondonAppDev Over a year ago

This is really useful, what is the second argument of simulate() which you set to {}?

Andreas Köberle Over a year ago

This would be the event argument the callback is called with, usually something like {target: value: 'someValue'}

Collectives™ on Stack Overflow

Test a callback Function using jest and enzyme in ReactJS?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related