TypeError: scope.enabled is not a function when trying to test a component

[rekaburmeister]

We recently migrated to v11, alongside introducing unit testing in our application. We're currently using Jest 28 with @testing-library/react. Before the migration, our tests were working perfectly fine.

Post-migration however, the test of a component that contains a TextArea fails when act() is being called:

TypeError: scope.enabled is not a function
      at Object.useFeatureFlag (node_modules/@carbon/react/lib/components/FeatureFlags/index.js:131:16)
      at TextArea (node_modules/@carbon/react/lib/components/TextArea/TextArea.js:46:23)
      at renderWithHooks (node_modules/react-dom/cjs/react-dom.development.js:14985:18)
      at updateForwardRef (node_modules/react-dom/cjs/react-dom.development.js:17044:20)
      at beginWork (node_modules/react-dom/cjs/react-dom.development.js:19098:16)
      at HTMLUnknownElement.callCallback (node_modules/react-dom/cjs/react-dom.development.js:3945:14)
      at HTMLUnknownElement.callTheUserObjectsOperation (node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30)
      at innerInvokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:340:25)
      at invokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:276:3)
      at HTMLUnknownElementImpl._dispatch (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:223:9)
      at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)
      at HTMLUnknownElement.dispatchEvent (node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:241:34)
      at Object.invokeGuardedCallbackDev (node_modules/react-dom/cjs/react-dom.development.js:3994:16)
      at invokeGuardedCallback (node_modules/react-dom/cjs/react-dom.development.js:4056:31)
      at beginWork$1 (node_modules/react-dom/cjs/react-dom.development.js:23964:7)
      at performUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:22779:12)
      at workLoopSync (node_modules/react-dom/cjs/react-dom.development.js:22707:5)
      at renderRootSync (node_modules/react-dom/cjs/react-dom.development.js:22670:7)
      at performSyncWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:22293:18)
      at node_modules/react-dom/cjs/react-dom.development.js:11327:26
      at unstable_runWithPriority (node_modules/scheduler/cjs/scheduler.development.js:468:12)
      at runWithPriority$1 (node_modules/react-dom/cjs/react-dom.development.js:11276:10)
      at flushSyncCallbackQueueImpl (node_modules/react-dom/cjs/react-dom.development.js:11322:9)
      at flushSyncCallbackQueue (node_modules/react-dom/cjs/react-dom.development.js:11309:3)
      at batchedUpdates$1 (node_modules/react-dom/cjs/react-dom.development.js:22387:7)
      at act (node_modules/react-dom/cjs/react-dom-test-utils.development.js:1042:14)
      at Object.<anonymous> (src/components/MyComponent/MyComponent.test.tsx:221:8)

The issue is coming from this line of the TextArea component:

const enabled = useFeatureFlag('enable-v11-release');

The useFeatureFlag hook is trying to use the scope method of the FeatureFlagContext, which does not exist in the simple jest invocation of my component.

I'm very new to jest and am struggling to set up a mock properly for this. Can anyone help, please? I looked through the carbon docs and there is no mention of extra hoops to jump through when creating tests.

[rekaburmeister]

Worked it out:

import { useFeatureFlag } from "@carbon/react/lib/components/FeatureFlags";
jest.mock("@carbon/react/lib/components/FeatureFlags");
const useFeatureFlagMock = mockFunction(useFeatureFlag);
useFeatureFlagMock.mockReturnValue(true);

May save some time for someone else, facing the same issue

[tay1orjones]

Sorry for the problem here, we're working on pulling out the feature flags used for v11 so this won't be an issue in the future.