I am currently trying to implement a component for Twilio Flex I am using the Twilio Flex V2 UI. In the creation of the components I am creating there is some buiness logic, that I would like to unit test with jest. However when I try to run the unit test with the jest runner, I am facing the following error:
● Test suite failed to run
TypeError: Cannot read properties of undefined (reading 'then')
> 1 | import { styled } from '@twilio/flex-ui';
| ^
2 | export const ConfirmationDialogStyles = styled('div')({});
3 |
4 |
The stack trace is suggesting that the twilio-flex-ui-core package is trying to call a method called playInitialAudio the stack trace is as follows:
Error: Not implemented: HTMLMediaElement.prototype.play
at module.exports (C:\Development\Simplifi.Continuity\plugin-cet-flex\node_modules\jest-environment-jsdom\node_modules\jsdom\lib\jsdom\browser\not-implemented.js:9:17)
at HTMLAudioElementImpl.play (C:\Development\Simplifi.Continuity\plugin-cet-flex\node_modules\jest-environment-jsdom\node_modules\jsdom\lib\jsdom\living\nodes\HTMLMediaElement-impl.js:118:5)
at HTMLAudioElement.play (C:\Development\Simplifi.Continuity\plugin-cet-flex\node_modules\jest-environment-jsdom\node_modules\jsdom\lib\jsdom\living\generated\HTMLMediaElement.js:148:60)
at e.playInitialAudio (C:\Development\Simplifi.Continuity\plugin-cet-flex\node_modules\@twilio\flex-ui-core\bundle\twilio-flex-ui-core.prod.js:137:337013)
at new e (C:\Development\Simplifi.Continuity\plugin-cet-flex\node_modules\@twilio\flex-ui-core\bundle\twilio-flex-ui-core.prod.js:137:336838)
at e.initMediaManager (C:\Development\Simplifi.Continuity\plugin-cet-flex\node_modules\@twilio\flex-ui-core\bundle\twilio-flex-ui-core.prod.js:137:335545)
at new e (C:\Development\Simplifi.Continuity\plugin-cet-flex\node_modules\@twilio\flex-ui-core\bundle\twilio-flex-ui-core.prod.js:137:335357)
at Object.<anonymous> (C:\Development\Simplifi.Continuity\plugin-cet-flex\node_modules\@twilio\flex-ui-core\bundle\twilio-flex-ui-core.prod.js:137:336285)
at n (C:\Development\Simplifi.Continuity\plugin-cet-flex\node_modules\@twilio\flex-ui-core\bundle\twilio-flex-ui-core.prod.js:137:363)
at Object.<anonymous> (C:\Development\Simplifi.Continuity\plugin-cet-flex\node_modules\@twilio\flex-ui-core\bundle\twilio-flex-ui-core.prod.js:137:334570)
at n (C:\Development\Simplifi.Continuity\plugin-cet-flex\node_modules\@twilio\flex-ui-core\bundle\twilio-flex-ui-core.prod.js:137:363)
at Object.<anonymous> (C:\Development\Simplifi.Continuity\plugin-cet-flex\node_modules\@twilio\flex-ui-core\bundle\twilio-flex-ui-core.prod.js:137:171456)
at n (C:\Development\Simplifi.Continuity\plugin-cet-flex\node_modules\@twilio\flex-ui-core\bundle\twilio-flex-ui-core.prod.js:137:363)
at C:\Development\Simplifi.Continuity\plugin-cet-flex\node_modules\@twilio\flex-ui-core\bundle\twilio-flex-ui-core.prod.js:137:1170
at C:\Development\Simplifi.Continuity\plugin-cet-flex\node_modules\@twilio\flex-ui-core\bundle\twilio-flex-ui-core.prod.js:137:1180
at C:\Development\Simplifi.Continuity\plugin-cet-flex\node_modules\@twilio\flex-ui-core\bundle\twilio-flex-ui-core.prod.js:137:81
at Object.<anonymous> (C:\Development\Simplifi.Continuity\plugin-cet-flex\node_modules\@twilio\flex-ui-core\bundle\twilio-flex-ui-core.prod.js:137:228)
at Runtime._execModule (C:\Development\Simplifi.Continuity\plugin-cet-flex\node_modules\jest-runtime\build\index.js:1439:24)
at Runtime._loadModule (C:\Development\Simplifi.Continuity\plugin-cet-flex\node_modules\jest-runtime\build\index.js:1022:12)
at Runtime.requireModule (C:\Development\Simplifi.Continuity\plugin-cet-flex\node_modules\jest-runtime\build\index.js:882:12)
at Runtime.requireModuleOrMock (C:\Development\Simplifi.Continuity\plugin-cet-flex\node_modules\jest-runtime\build\index.js:1048:21)
at Object.<anonymous> (C:\Development\Simplifi.Continuity\plugin-cet-flex\node_modules\@twilio\flex-ui\bundle\twilio-flex.prod.js:137:1624)
at i (C:\Development\Simplifi.Continuity\plugin-cet-flex\node_modules\@twilio\flex-ui\bundle\twilio-flex.prod.js:137:606)
at Object.<anonymous> (C:\Development\Simplifi.Continuity\plugin-cet-flex\node_modules\@twilio\flex-ui\bundle\twilio-flex.prod.js:137:574147)
at i (C:\Development\Simplifi.Continuity\plugin-cet-flex\node_modules\@twilio\flex-ui\bundle\twilio-flex.prod.js:137:606)
at Object.<anonymous> (C:\Development\Simplifi.Continuity\plugin-cet-flex\node_modules\@twilio\flex-ui\bundle\twilio-flex.prod.js:137:896189)
at i (C:\Development\Simplifi.Continuity\plugin-cet-flex\node_modules\@twilio\flex-ui\bundle\twilio-flex.prod.js:137:606)
at Object.<anonymous> (C:\Development\Simplifi.Continuity\plugin-cet-flex\node_modules\@twilio\flex-ui\bundle\twilio-flex.prod.js:137:894315)
at i (C:\Development\Simplifi.Continuity\plugin-cet-flex\node_modules\@twilio\flex-ui\bundle\twilio-flex.prod.js:137:606)
at Object.<anonymous> (C:\Development\Simplifi.Continuity\plugin-cet-flex\node_modules\@twilio\flex-ui\bundle\twilio-flex.prod.js:137:892013)
at i (C:\Development\Simplifi.Continuity\plugin-cet-flex\node_modules\@twilio\flex-ui\bundle\twilio-flex.prod.js:137:606)
at Object.<anonymous> (C:\Development\Simplifi.Continuity\plugin-cet-flex\node_modules\@twilio\flex-ui\bundle\twilio-flex.prod.js:137:195038)
at i (C:\Development\Simplifi.Continuity\plugin-cet-flex\node_modules\@twilio\flex-ui\bundle\twilio-flex.prod.js:137:606)
at Object.<anonymous> (C:\Development\Simplifi.Continuity\plugin-cet-flex\node_modules\@twilio\flex-ui\bundle\twilio-flex.prod.js:137:890907)
at i (C:\Development\Simplifi.Continuity\plugin-cet-flex\node_modules\@twilio\flex-ui\bundle\twilio-flex.prod.js:137:606)
at C:\Development\Simplifi.Continuity\plugin-cet-flex\node_modules\@twilio\flex-ui\bundle\twilio-flex.prod.js:137:1587
at C:\Development\Simplifi.Continuity\plugin-cet-flex\node_modules\@twilio\flex-ui\bundle\twilio-flex.prod.js:137:1598
at C:\Development\Simplifi.Continuity\plugin-cet-flex\node_modules\@twilio\flex-ui\bundle\twilio-flex.prod.js:137:81
at Object.<anonymous> (C:\Development\Simplifi.Continuity\plugin-cet-flex\node_modules\@twilio\flex-ui\bundle\twilio-flex.prod.js:137:220)
at Runtime._execModule (C:\Development\Simplifi.Continuity\plugin-cet-flex\node_modules\jest-runtime\build\index.js:1439:24)
at Runtime._loadModule (C:\Development\Simplifi.Continuity\plugin-cet-flex\node_modules\jest-runtime\build\index.js:1022:12)
at Runtime.requireModule (C:\Development\Simplifi.Continuity\plugin-cet-flex\node_modules\jest-runtime\build\index.js:882:12)
at Runtime.requireModuleOrMock (C:\Development\Simplifi.Continuity\plugin-cet-flex\node_modules\jest-runtime\build\index.js:1048:21)
at Object.require (C:\Development\Simplifi.Continuity\plugin-cet-flex\src\components\ConfirmationDialog\ConfirmationDialog.Styles.ts:1:1)
at Runtime._execModule (C:\Development\Simplifi.Continuity\plugin-cet-flex\node_modules\jest-runtime\build\index.js:1439:24)
at Runtime._loadModule (C:\Development\Simplifi.Continuity\plugin-cet-flex\node_modules\jest-runtime\build\index.js:1022:12)
at Runtime.requireModule (C:\Development\Simplifi.Continuity\plugin-cet-flex\node_modules\jest-runtime\build\index.js:882:12)
at Runtime.requireModuleOrMock (C:\Development\Simplifi.Continuity\plugin-cet-flex\node_modules\jest-runtime\build\index.js:1048:21)
at Object.require (C:\Development\Simplifi.Continuity\plugin-cet-flex\src\components\ConfirmationDialog\ConfirmationDialog.tsx:6:1)
at Runtime._execModule (C:\Development\Simplifi.Continuity\plugin-cet-flex\node_modules\jest-runtime\build\index.js:1439:24)
at Runtime._loadModule (C:\Development\Simplifi.Continuity\plugin-cet-flex\node_modules\jest-runtime\build\index.js:1022:12)
at Runtime.requireModule (C:\Development\Simplifi.Continuity\plugin-cet-flex\node_modules\jest-runtime\build\index.js:882:12)
at Runtime.requireModuleOrMock (C:\Development\Simplifi.Continuity\plugin-cet-flex\node_modules\jest-runtime\build\index.js:1048:21)
at Object.<anonymous> (C:\Development\Simplifi.Continuity\plugin-cet-flex\src\components\ConfirmationDialog\__tests__\ConfirmationDialog.spec.tsx:7:1)
at Runtime._execModule (C:\Development\Simplifi.Continuity\plugin-cet-flex\node_modules\jest-runtime\build\index.js:1439:24)
at Runtime._loadModule (C:\Development\Simplifi.Continuity\plugin-cet-flex\node_modules\jest-runtime\build\index.js:1022:12)
at Runtime.requireModule (C:\Development\Simplifi.Continuity\plugin-cet-flex\node_modules\jest-runtime\build\index.js:882:12)
at jestAdapter (C:\Development\Simplifi.Continuity\plugin-cet-flex\node_modules\jest-circus\build\legacy-code-todo-rewrite\jestAdapter.js:77:13)
at processTicksAndRejections (node:internal/process/task_queues:95:5)
at runTestInternal (C:\Development\Simplifi.Continuity\plugin-cet-flex\node_modules\jest-runner\build\runTest.js:367:16)
at runTest (C:\Development\Simplifi.Continuity\plugin-cet-flex\node_modules\jest-runner\build\runTest.js:444:34)
at Object.worker (C:\Development\Simplifi.Continuity\plugin-cet-flex\node_modules\jest-runner\build\testWorker.js:106:12) {
type: 'not implemented'
}
I have setup my compontent following the recommended guidlines from Twilio in the following structure:
|
|-- components/
|-- |-- ConfirmationDialog/
|-- |-- |-- ConfirmationDialog.Container.ts
|-- |-- |-- ConfirmationDialog.Styles.ts
|-- |-- |-- ConfirmationFialog.tsx
I can provide the code should that be necessary to help answer the question, my unit test though currently looks like the below, I am attempting to create a snapshot of the page and compare the result again the snapshot, but I cannot seem to get past the above error:
/*
* @jest-environment jsdom
*/
import React from 'react';
import { create, act } from 'react-test-renderer';
import ConfirmationDialog, { DialogPromptProps } from '../ConfirmationDialog';
const dialogPromptProps: DialogPromptProps = {
isOpen: true,
title: "testTitle",
message: "testMessage",
actionText: "Confirm",
onClose: () => jest.fn(() => Promise.resolve()),
onConfirm: () => jest.fn(() => Promise.resolve()),
cancelText: "Cancel",
};
describe("ConfirmationDialog", () => {
it("should render the dialog to the screen", () => {
const render = create(<ConfirmationDialog {...dialogPromptProps} />)
const root = render.root;
expect(root).toMatchSnapshot();
});
});
Based on reading other issue that seemed similar to this, I have attempted to mock the Twilio flex library
beforeAll(() => {
jest.mock('twilio-flex');
})
or the specific library
const mockFunction = jest.fn(() => Promise.resolve());
jest.mock('twilio-flex-ui-core', () => {
return {
playInitialAudio: mockFunction,
};
});