I have defined setState in my function. The function setting the function is called by another function as follows :

    pageChanged(page) {
      this.setPage(page, false);

    }

    setPage(page, isLoading) {
        var pager = this.state.pager;
        var totalItems = this.props.totalItems;

        if (page < 1 || page > pager.totalPages) {
            return null;
        }

        pager = this.getPager(totalItems, page, 6);

        this.setState({ pager: pager });

        if(!isLoading){ 
            this.props.onChangePage(pager.startIndex);
        }
    }

The function pageChanged(page) is called upon click.

onClick={this.pageChanged(page)}

I have tried writing many tests using sinon.spy but without success. Any help on how to proceed with the test.

I have defined setState in my function. The function setting the function is called by another function as follows :

    pageChanged(page) {
      this.setPage(page, false);

    }

    setPage(page, isLoading) {
        var pager = this.state.pager;
        var totalItems = this.props.totalItems;

        if (page < 1 || page > pager.totalPages) {
            return null;
        }

        pager = this.getPager(totalItems, page, 6);

        this.setState({ pager: pager });

        if(!isLoading){ 
            this.props.onChangePage(pager.startIndex);
        }
    }

The function pageChanged(page) is called upon click.

onClick={this.pageChanged(page)}

I have tried writing many tests using sinon.spy but without success. Any help on how to proceed with the test.

• javascript
• reactjs
• unit-testing
• jestjs

1 Answer 1

  describe('pageChanged', () => {
    it('expect to call setPage', () => {
      const wrapper = shallow(<YourComponent />);
      const page = 'test';
      wrapper.instance().setPage = jest.fn(); // mock `setPage` method
      wrapper.instance().pageChanged(page);

      expect(wrapper.instance().setPage).toHaveBeenCalledWith(page, false);
    });
  });

  describe('setPage', () => {
    it('expect to change state', () => {
      const wrapper = shallow(<YourComponent />);
      const page = 'test';
      const pager = '?page=test'
      wrapper.instance().getPager = () => pager; // mock `getPager` method
      // it also can be mocked using jest.fn():
      // wrapper.instance().getPager = jest.fn().mockReturnValue(pager);
      wrapper.instance().setPage(page);

      expect(wrapper.state.pager).toBe(pager);
    });
  });