Unable to run Jest unit tests when ErrorBoundary is imported

Expected behavior

I’m trying to add more granular error boundaries, rather than merely having a single wrapper around the app root. This is per React 16 intention to allow for catching errors without unmounting the entire app.

Observed behavior

It works fine in browser, but my Jest test suite won’t run when bugsnag client is imported.

This error is output by Jest test runner:

  ● Test suite failed to run

    TypeError: (0 , _bugsnagJs2.default) is not a function

      at Object.<anonymous> (src/app/initializers/bugsnag.js:17:43)
      at Object.<anonymous> (src/app/components/ErrorBoundary/ErrorBoundary.jsx:38:16)
      at Object.<anonymous> (src/app/components/ErrorBoundary/index.js:7:22)

  console.error node_modules/bugsnag-js/node/index.js:1
    +-------------------------------------------------------------+
      Bugsnag Error: "bugsnag-js" is for browser JavaScript only.
      For node, use the "bugsnag" package.
    +-------------------------------------------------------------+``

Steps to reproduce

Import ErrorBoundary into any component with a unit test.

Version

1.1

Additional information

[Insert any additional information]

Can’t comment on Issues?

Some users have been unable to comment on Github issues when an adblocker extension is enabled. We recommend temporarily disabling the extension, or if that fails, contacting [e-mail].

[foxyblocks]

Hmm, sorry about that, bugsnag-js needs to run in a browser environment and jest runs tests in a node environment. We should figure out a recommended workaround, but in the mean time one thing you could try is to stub the error boundary in your jest tests to render a dumb pass through component. I think the syntax would be

jest.mock('src/app/components/ErrorBoundary', () => ({children}) => children)

You can also add this to your global setup file to have it run before every test.

If you don’t want to mock the error boundary you can mock the bugsnag-js module itself but that will require a more complicated mock object. I haven’t tested this but I think it would work

jest.mock('bugsnag-js', () => ({
  use (plugin) {
     const boundary = plugin.init()
     // we don't want the error boundary to swallow the errors, we want jest see them and fail the test
     delete boundary.prototype.componentDidCatch;
     return boundary;
  }
}))

[kceb]

To those that come across this ticket in the future, the following worked for me:

jest.mock('bugsnag-js', () => (
  () => ({
    use(plugin) {
      const boundary = plugin.init();
      delete boundary.prototype.componentDidCatch;
      return boundary;
    },
  })
));

It is a slightly modified version of the mock provided above, but it returns a function instead of an object

@dbchristopher