开玩笑的单元测试 - 测试 setState()答案

【问题标题】：Jest unit testing - test setState()开玩笑的单元测试 - 测试 setState()
【发布时间】：2017-09-06 14:58:01
【问题描述】：

我在我的函数中定义了setState。设置函数的函数被另一个函数调用如下：

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

函数pageChanged(page)被click调用。

onClick={this.pageChanged(page)}

我尝试使用sinon.spy 编写许多测试，但没有成功。有关如何进行测试的任何帮助。

【问题讨论】：

标签： javascript reactjs unit-testing jestjs

【解决方案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);
    });
  });

【讨论】：