Problems with using `useFakeTimers('modern')` in a create-react-app (CRA) project with Jest 26 and Lodash's `debounce` function

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
  • WorkOS - The modern identity platform for B2B SaaS
  • InfluxDB - Power Real-Time Data Analytics at Scale
  • jest

    Delightful JavaScript Testing.

  • I spent quite a lot of time reading through the ideas on this long-running issue: calling runAllTimers after using Lodash's _.debounce results in an infinite recursion error. That gave me the tip to switch from jest.runAllTimers() to jest.runOnlyPendingTimers(), but I was still getting the TypeError: Cannot read properties of undefined (reading 'useFakeTimers') error message.

  • em

    A beautiful, minimalistic note-taking app for personal sensemaking.

  • I kept looking through Github issues and PRs to try and work out what my local application was missing, and why the documentation examples didn't work for me. Eventually, I found this issue and its associated pull request where a contribitor discovered why their use of jest.useFakeTimers('modern') was failing:

  • SurveyJS

    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.

    SurveyJS logo
  • dom-testing-library

    ๐Ÿ™ Simple and complete DOM testing utilities that encourage good testing practices.

  • I did some digging and it looks like testing-library/dom-testing-library recommended using jest-environment-jsdom-sixteen in its release notes for v7.0.0 because CRA was using an older version of Jest which provided an older version of jsdom that was missing support for things like MutationObservers and other modern web features. However, eventually CRA was updated to use the newer version of Jest, and this made using jest-environment-jsdom-sixteen unnecessary โ€“ and in this case actually harmful as it prevented me from using the new useFakeTimers('modern') functionality. Once I removed the --env=jsdom-sixteen line from the test script in package.json everything started working as I expected.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts