Instrumenting Our Frontend Test Suite (...and fixing what we found)

• jest

  474 43,616 9.5 TypeScript

  Delightful JavaScript Testing.

  

As mentioned above, we use Jest as our test runner. It’s important to note, that our instrumentation method requires using jest-circus test runner. This is the default for Jest version 27, however, it can be used with earlier versions of Jest. jest-circus is required because it allows us to listen to events from Jest by using a custom environment and defining a handleTestEvent method. Below is a basic test snippet annotated with an approximation of where jest-circus’s events are fired.

• Sentry

  266 36,957 10.0 Python

  Developer-first error tracking and performance monitoring

  

Sentry’s Performance Monitoring instrumentation is tree-like in structure with a transaction as the root node, and spans as child nodes. We can use a combination of the event name and the test name to determine if we should either create a transaction, create a child span from an existing transaction or end a span/transaction. Here’s an example of how we implemented it.

• SurveyJS

  surveyjs.io featured

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• jest-sentry-environment

  1 6 0.0 JavaScript

  Sentry performance instrumentation for jest

We provided an example Jest environment that you can use if you’re interested in instrumenting your own Jest tests. You’ll need to install the jest-sentry-environment package and update your Jest configuration to use the fore-mentioned package, as well as supplying your Sentry DSN. For further instructions, please see the repository.

Suggest a related project