import 'useAuthenticator' from aws-amplify outputs "TypeError: window.URL.createObjectURL is not a function" when jest testing

Question

I would like to know how to mock this kind of dependency's error. If I omit this import and comment out related source code, the test process is going to be fine. Already have got through Mock Function Jest, but no idea what I should do.

*This project was created by CRA with template typescript.

App component.

import { useAuthenticator } from '@aws-amplify/ui-react';

const App = () => {
  const { user } = useAuthenticator((context) => [context.user]);
  return (
    <div>{user?.username}</div>
  );
};

export default App;

Test code here.

import App from 'src/App';
import { render, screen } from '@testing-library/react';

describe('First group',()=>{
  test('rendering App component',()=>{
    // App includes 'import { useAuthenticator } from '@aws-amplify/ui-react';'
    render(<App/>)
    screen.debug()
  })
})

Error outputs here.

  ● Test suite failed to run

    TypeError: window.URL.createObjectURL is not a function

    > 1 | import { useAuthenticator } from '@aws-amplify/ui-react';
        | ^
      2 |
      3 | const App = () => {
      4 |   const { user } = useAuthenticator((context) => [context.user]);

      at define (node_modules/maplibre-gl/dist/maplibre-gl.js:25:43)
      at node_modules/maplibre-gl/dist/maplibre-gl.js:35:1
      at node_modules/maplibre-gl/dist/maplibre-gl.js:3:81
      at Object.<anonymous> (node_modules/maplibre-gl/dist/maplibre-gl.js:6:2)
      at Object.<anonymous> (node_modules/@aws-amplify/ui-react/dist/index.js:1:484)
      at Object.<anonymous> (src/App.tsx:1:1)

Based on slideshowp2's answer, added setup and config file. But still hits the error. Both are located rootDir.

jest.setup.js

if (typeof window.URL.createObjectURL === 'undefined') {
  window.URL.createObjectURL = jest.fn();
}

jest.config.js

module.exports = {
  setupFilesAfterEnv: ['./jest.setup.js'],
};

UPDATE
This PJ was created by CRA so it required to follow their rule. I finally resolved this by slideshowp2's answer and the correct location to put the pollyfilling code.

src/setupTests.ts

if (typeof window.URL.createObjectURL === 'undefined') {
  window.URL.createObjectURL = jest.fn();
}

Answer 1

See troubleshooting#jest

As of v2.15.0 of @aws-amplify/ui-react which included the release of Geo components, users of the Jest testing framework may run into the following error when attempting to run tests:

window.URL.createObjectURL is not a function

Please follow the steps below to resolve this issue.

1. Navigate to or create a Jest setup file for your project.

2. Add the following code to polyfill the unrecognized function in your Jest setup file:

jest.setup.js:

if (typeof window.URL.createObjectURL === 'undefined') {
  window.URL.createObjectURL = jest.fn();
}

jest.config.js:

module.exports = {
  //...
  setupFilesAfterEnv: ['./jest.setup.js'],
  //...
}

This is a known problem when using the jsdom library (a dependency of Jest) with a package that uses an unrecognized function. See this issue.