Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

151
Vistas
Is it possible to test Sentry.ErrorBoundary rendering in jest?

I've just implemented the Sentry.ErrorBoundary component and I was wondering if it was possible to test the rendering of it. For example:

<Sentry.ErrorBoundary>
    <FailComponent />
  </Sentry.ErrorBoundary>

or

<Sentry.ErrorBoundary>
    <SuccessComponent />
  </Sentry.ErrorBoundary>
about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

I' d suggest another approach on this, which is to work with a custom ErrorBoundary HO-component, as react doc (https://reactjs.org/docs/error-boundaries.html) and catch the error into the componentDidCatch() function, instead.

In this way you can more easily test your hoc component.

The error boundary component will be like so:

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

type State = {
  hasError?: boolean,
  eventId?: string,
  error: null | Error,
  errorInfo?: null | {componentStack: string},
};

type Props = {
  children: any,
}

class ErrorBoundary extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = {
      error: null,
    };
  }

  componentDidCatch(error: Error, errorInfo: any) {
    const { children } = this.props;

    // Configure what data you want to update, whenever an error happens.
    // Here, i update the breadcrumbs 
    Sentry.addBreadcrumb({
      type: Sentry.Severity.Error,
      category: 'component',
      message: children.props.name || 'n/a',
      level: Sentry.Severity.Error,
    });

    // Here, i set tag and some extra infos, plus the exception.

    Sentry.configureScope((scope: any) => {
      scope.setTag('component', children.props.name || 'n/a');
      scope.setExtra('component info', error);
      scope.setExtras(errorInfo);
      Sentry.captureException(error, scope);
      this.setState({
        error,
      });
    });
  }

  render() {
    const {
      error,
    } = this.state;

    const {
      children,
    } = this.props;

    // In case of an error, the fallback UI kicks in.
    if (error) {
      // custom fallback UI
      // We return an empty component with 'data-attr'
      //  with the failing component name (for debug purposes)
      return (
        <>
          <div data-attr={children.props.name} />
        </>
      );
    }

    return children;
  }
}

export default ErrorBoundary;

After the above, you can use the errorboundary hoc like so:

      <ErrorBoundary>
        <Mycomponent />
      </ErrorBoundary>

If an error happens into <Mycomponent />, the <ErrorBoundary /> will render, with the UI that you set

You can test it as you test your rest components, like check if it has been rendered. Hope this helps.

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda