Question

我一直在尝试在新的React应用程序上为注册页面编写单元测试

但是，我对Sinon存根/间谍的概念非常陌生，并且在拦截函数调用和强制解决问题方面一直遇到问题。

这是我的最初测试：

Session

onClick运行以下事件处理程序：（简体）

test('Success notification is displayed if all information is valid', () => {
  wrapper.setState({ username: 'test', password: 'Test1234!@', confirmPassword: 'Test1234!@' });
  const stub = sinon.stub(Register.prototype, 'signUp').resolves('Test');
  wrapper.find('#submitRegistration').simulate('click');
});

最后，注册：

public onSubmitHandler(e: React.FormEvent) {
  // Perform password match check
  if (password === confirmPassword) {
      this.signUp(this.state.username, password);
    } else {
      // Set success state
    }
  } else {
    // Set error state
  }
}

我该如何拦截对signUp的调用并将其沿解析路径向下移动，当前由于我没有配置每次使用“ No userPool”捕获的AWS Amplify Auth模块

Answer 1

Jest提供了多种模拟依赖项的方法，主要有两种：

Manual Mocks-这些使您可以控制模拟的更多细节。
Mock functions-如果您需要一个简单的模拟来解决常见问题，例如翻译，这些将非常有帮助。

对于您的情况，您还需要处理Promises，因此，您需要遵循testing async behaviour上的建议。

对于您的情况，我假设：

Auth是一个名为“ auth-module”的模块
您只需要设置一次模拟，并拥有1项测试数据即可解决成功，而1项则可以解决失败。

// telling jest to mock the entire module
    jest.mock("auth-module", () => ({
      // telling jest which method to mock
      signUp: ({ password, username }) =>
        new Promise((resolve, reject) => {
          // setting the test expectations / test data
          process.nextTick(
            () =>
              username === "SuccessUser"
                ? resolve(userName)
                : reject({
                    error: "failure message"
                  })
          );
        })
    }));

注意：即使该代码段无法运行，也要添加该代码段，因为该格式似乎已被代码块破坏。

Answer 2

在dubes的回答中稍加思考，我设法获得了以下信息：

const signUpSpy = jest.spyOn(Auth, 'signUp').mockImplementation((user, password) => {
  return new Promise((res, rej) => {
    res();
  });
});

我不是直接监视该函数，而是编写并调用该函数，将其移至Modules函数并从那里解决了承诺！

对运行诺言的函数进行存根

2 个答案: