Question

我有一个执行fetchUser()的componentDidMount。我正在尝试测试componentDidMount。

组件代码：

static propTypes = {
    match: PropTypes.shape({
      isExact: PropTypes.bool,
      params: PropTypes.object,
      path: PropTypes.string,
      url: PropTypes.string
    }),
    label: PropTypes.string,
    actualValue: PropTypes.string,
    callBack: PropTypes.func
  };

  state = {
    user: {}
  };

  componentDidMount() {
    this.fetchUser();
  }

  getUserUsername = () => {
    const { match } = this.props;
    const { params } = match;
    return params.username;
  };

  fetchUser = () => {
    getUser(this.getUserUsername()).then(username => {
      this.setState({
        user: username.data
      });
    });
  };

测试：

    it('should call fetchUsers function only once', () => {
      const match = { params: { username: 'testUser' }, isExact: true, path: '', url: '' };
      const fetchUserFn = jest.fn(match);
      const wrapper = shallow(<UserDetailsScreen match={match} fetchUsers={fetchUserFn} />);
      wrapper.instance().componentDidMount(match);
      expect(fetchUserFn).toHaveBeenCalledTimes(1); // I get expected 1 and got 0
    });

我的意思是为什么这个componentDidMount()测试与我的测试不同？在过去的几周中，我已经测试了其中的许多功能，从未测试过此问题。也许是因为getUser()是一个承诺，我需要嘲笑它。以前有没有人陷入过这样的困境？

getUser()

的代码

export const getUser = username => {
  const options = {
    method: httpMethod.GET,
    url: endpoint.GET_USER(username)
  };
  return instance(options);
};

Answer 1

我开玩笑地通过使用spyOn()找到了解决方案。不知道为什么，我需要监视这个特定的用例，但是请解释一下。下面的解决方案：

    it('should call fetchUsers function only once', () => {
      const match = { params: { username: 'testUser' }, isExact: true, path: '', url: '' };
      const fetchUserFn = jest.fn(match);
      const spy = jest.spyOn(UserDetailsScreen.prototype, 'componentDidMount');
      const wrapper = shallow(<UserDetailsScreen match={match} fetchUsers={fetchUserFn} />, {
        disableLifecycleMethods: true
      });
      wrapper.instance().componentDidMount(match);
      expect(spy).toHaveBeenCalledTimes(1);
    });

一个警告。如果您没有使用disableLifecycleMethods，该函数将被调用两次。如果我没记错的话，每次渲染一次。

笑话/酶| ComponentDidMount应该在什么时候不被调用

1 个答案: