testing a function within a component

Question

Trying to use jest to write a unit test for the following function, up untill now i have been exporting functions outside of the class to test, my problem now is a function is within a class and i dont know how to properly test it. The below handleRequest is within a class

 handleRequestSort(event, property) {
    const orderBy = property;
    let order = 'desc';

    if (this.state.orderBy === property && this.state.order === 'desc') {
        order = 'asc';
    }

    this.setState({ order, orderBy });
}

   describe('Test for handleRequestSort', () => {
    it('should handle the sorting of a request', () => {
     const ordering = Contract.handleRequestSort(null, 'name');
     expect(ordering).toEqual('name');
    });
    });

`describe('Test for handleRequestSort', () => { it('should handle the sorting of a request', () => { const wrapper = shallow(); wrapper.instance().handleRequestSort(null, 'name'); expect(wrapper).toEqual('name'); }); });` tried something like this but to no avail — Broken Mind, Feb 28 '19 at 22:12
How exactly is `handleRequestSort()` executed by a component instance? The point would be to trigger that method indirectly via the event that internally calls the `handleRequestSort()` method for that component instance then check the results after it has executed. For example, if it triggers because of a click event on some button on that component, to trigger/simulate a click then validate `order`, `orderBy` state values have updated as you expect. — Alexander Staroselsky, Feb 28 '19 at 22:13
it is passed into another component onRequestSort={this.handleRequestSort} — Broken Mind, Feb 28 '19 at 22:25
Possible duplicate of [Invoke a function with enzyme when function is passed down as prop - React](https://stackoverflow.com/questions/49064334/invoke-a-function-with-enzyme-when-function-is-passed-down-as-prop-react) — Alexander Staroselsky, Feb 28 '19 at 23:28
Check out the answer. You can effectively find the child component, execute the respective prop function bound to that child component, then validate results (state changed as you expect). — Alexander Staroselsky, Feb 28 '19 at 23:29

score 0 · Answer 1 · answered Mar 01 '19 at 04:17

You're close.

Here is a working example based on the code you provided:

import * as React from 'react';
import { shallow } from 'enzyme';

class ContractTable extends React.Component {
  constructor(...args) {
    super(...args);
    this.state = { };
  }
  handleRequestSort(event, property) {
    const orderBy = property;
    let order = 'desc';

    if (this.state.orderBy === property && this.state.order === 'desc') {
      order = 'asc';
    }

    this.setState({ order, orderBy });
  }
  render() { return null; }
}

describe('Test for handleRequestSort', () => {
  it('should handle the sorting of a request', () => {
    const wrapper = shallow(<ContractTable />);
    const instance = wrapper.instance();
    instance.handleRequestSort(null, 'name');
    expect(wrapper.state()).toEqual({ order: 'desc', orderBy: 'name' });  // SUCCESS
    instance.handleRequestSort(null, 'name');
    expect(wrapper.state()).toEqual({ order: 'asc', orderBy: 'name' });  // SUCCESS
    instance.handleRequestSort(null, 'address');
    expect(wrapper.state()).toEqual({ order: 'desc', orderBy: 'address' });  // SUCCESS
  });
});

For those who have searched for this answer and are trying to test a stateless component, be aware that in React 16 and above, instance() returns null for stateless functional components. [link](https://airbnb.io/enzyme/docs/api/ReactWrapper/instance.html). — Ed Lucas, Mar 01 '19 at 21:46

testing a function within a component

1 Answers1