CODEWITHSUNDEEP
javascriptreactjsreact-reduxjestjsenzyme
howHighUR
howHighUR

Reputation: 185

React Redux Test failed because it can't fetch data throught action

I'm trying to test my smart component using Jest and Enzyme but it has no data to render because it supposed to be fetched trought actions. Error is: getTasks is not a function

Enzyme.configure({ adapter: new Adapter() });

describe('Main', () => {
  describe('when loading is true', () => {
    it('should render loading div', () => {
      const wrapper = mount(<Main.WrappedComponent loading={true} />);
      expect(wrapper.html()).toEqual('<div>Loading</div>');
      wrapper.unmount();
    });
  });
});

And this is component I'm trying to test, it fetching data trought actions and then doing some stuff with them, but if there is no data(loading === true) it just renders the <div> with "Loading" text. getTasks() just import the data:

class Main extends React.Component {
  constructor(props) {
    super();
    this.handleData = this.handleData.bind(this);
    this.handleHigh = this.handleHigh.bind(this);
  }

  componentDidMount() {
    const { getTasks } = this.props;
    getTasks();
  }

  render() {
    const { data, loading } = this.props;
    if (!loading) {
      this.handleData(data);
      return (
          {data.map(task => {
            if (task.obj_status === 'active') 
              return (
               // Doing some stuff with data here
              );
    } else {
      return <div>Loading</div>;
    }
  }
}

const mapStateToProps = state => ({
  data: state.main.data,
  loading: state.main.loading
});

const mapDispatchToProps = dispatch => ({
  ...bindActionCreators(
    {
      getTasks: loadTasks,
      dispatch
    },
    dispatch
  )
});

export default withRouter(
  connect(
    mapStateToProps,
    mapDispatchToProps
  )(Main)
);

Upvotes: 0

Views: 70

Answers (2)

Adrian Pażucha
Adrian Pażucha

Reputation: 96

Better solution is mock function:

const getTasksMock = jest.fn();
const wrapper = mount(<Main.WrappedComponent loading={true} getTasks={getTasksMock}/>);

Then you are able check invoking function by for example: toHaveBeenCalled() https://jestjs.io/docs/en/expect.html#tohavebeencalled

Upvotes: 0

AHB
AHB

Reputation: 558

You need to pass in getTasks as a function into your props:

const wrapper = mount(<Main.WrappedComponent loading={true} getTasks={() => {}} />);

As when Enzyme mounts it will invoke componentDidMount and will call the undefined prop and blow up

Upvotes: 1

Related Questions