react-native - 测试不同的 Facebook 登录案例

Question

我正在使用 https://github.com/facebook/react-native-fbsdk 在 React Native 应用程序中实现 Facebook 登录.

在我的代码中，根据用户授予的权限和是否发生错误，我有不同的结果:

handleFacebookLogin = async () => {
  const result = await LoginManager.logInWithPermissions([
    "public_profile",
    "email"
  ]);
  if (result.isCancelled) {
    //do nothing, the user cancelled
  } else {
    const data = await AccessToken.getCurrentAccessToken();
    if (!data) {
      this.showAlert(
        strings.onboarding.fb_login.error_title,
        strings.onboarding.fb_login.error_body,
        strings.onboarding.fb_login.ok_button
      );
    } else {
      if (result.grantedPermissions.toString().contains("user_email")) {
        //navigate to screen A
      } else {
        //navigate to screen B
      }
    }
  }
};

showAlert = (title, body, button) => {
  //show alert
};

我想为每种情况编写一个测试(例如，发生错误，用户授予电子邮件权限，用户未授予电子邮件权限)。

我开始编写一个测试以在错误发生时显示警报，但我一直在模拟实际错误(上面代码中的 if (!data) 场景)。

it("Shows an alert when an error occurs", () => {
  const errorMock = jest.fn();
  const loginMock = jest.fn();
  let ageScreen = renderer
    .create(<AgeScreen showAlert={errorMock} handleFacebookLogin={loginMock} />)
    .getInstance();

  const spy = jest
    .spyOn(ageScreen, "showAlert")
    .mockImplementation(/*TODO: mock fb library error */);

  ageScreen.handleFacebookLogin();
  expect(spy).toHaveBeenCalled();
});

我的问题是:

如何完成此测试用例，以便可靠地测试出现错误时是否会显示警报？

我如何测试其他场景(例如，如果用户授予电子邮件权限，则导航到屏幕 A)？

先感谢您! :)

Answer 1

首先你需要模拟 LoginManager和 AccessToken

jest.mock('react-native-fbsdk', () => ({
  ...jest.requireActual('react-native-fbsdk'),
  LoginManager: {
    logInWithPermissions: jest.fn(),
  },
  AccessToken: {
    getCurrentAccessToken: jest.fn(),
  }
}));

然后在每个测试用例中，模拟将导致您正在验证的场景的结果

it("Shows an alert when an error occurs", () => {
  const errorMock = jest.fn();
  const loginMock = jest.fn();
  // put what result will get
  LoginManager.logInWithPermissions.mockReturnValue(...);
  // put what data will get
  AccessToken.getCurrentAccessToken.mockReturnValue(...);

  let ageScreen = renderer
    .create(<AgeScreen showAlert={errorMock} handleFacebookLogin={loginMock} />)
    .getInstance();

  const spy = jest
    .spyOn(ageScreen, "showAlert")

  ageScreen.handleFacebookLogin();
  expect(spy).toHaveBeenCalled();
});

关于你的第二个问题，它会是一样的:模拟依赖关系并验证是否正在进行相应的调用