reactjs - 用 Jest 测试 Sentry

Question

我正在测试 React 的错误边界，并在 Codecov 中注意到我的 Sentry 函数的某个特定部分尚未经过测试。

我尝试使用 jest.mock("@sentry/browser") 和模拟 Sentry，但是，似乎无法测试这些行。 Sentry 导入是正确模拟的，但不是 scope。

这是我尝试模拟的一个示例。

import * as Sentry from "@sentry/browser"
const mock_scope = jest.fn(() => {
  return { setExtras: null }
})
Sentry.withScope = jest.fn().mockImplementation(mock_scope)

Answer 1

未测试的行是这个回调函数被传递给Sentry.withScope:

scope => {
  scope.setExtras(errorInfo);
  Sentry.captureException(error);
}

由于 Sentry.withScope 已被模拟，您可以使用 mockFn.mock.calls检索传递给它的回调函数。

获取回调函数后，可以直接调用测试。

这是一个稍微简化的工作示例:

import * as Sentry from '@sentry/browser';

jest.mock('@sentry/browser');  // <= auto-mock @sentry/browser

const componentDidCatch = (error, errorInfo) => {
  Sentry.withScope(scope => {
    scope.setExtras(errorInfo);
    Sentry.captureException(error);
  });
};

test('componentDidCatch', () => {
  componentDidCatch('the error', 'the error info');

  const callback = Sentry.withScope.mock.calls[0][0];  // <= get the callback passed to Sentry.withScope
  const scope = { setExtras: jest.fn() };
  callback(scope);  // <= call the callback

  expect(scope.setExtras).toHaveBeenCalledWith('the error info');  // Success!
  expect(Sentry.captureException).toHaveBeenCalledWith('the error');  // Success!
});

---

注意这一行:

const callback = Sentry.withScope.mock.calls[0][0];

...正在获取第一次调用Sentry.withScope的第一个参数，这是回调函数。