amplify-ui: Jest test fails on error thrown by package `mapbox-gl`

https://github.com/aws-amplify/amplify-ui/blob/27ea4f01e8c176e5a2f44a6bf2c30c566f80be3e/packages/react/package.json#L71

While testing a react functional component with jest, my tests failed to run due to the below error. I isolated the issue to the dependency @aws-amplify/ui-react bump from 2.10.0 to 2.15.0, and the stack trace shows the error is being thrown by this newly introduced package.

The error has a known workaround: https://stackoverflow.com/questions/52968969/jest-url-createobjecturl-is-not-a-function

There is also a package known to have the createObjectURL function: https://github.com/developit/jsdom-worker

Maybe another dependency needs to be added?

Error output:

 FAIL  src/authenticator.test.tsx
  ● Test suite failed to run

    TypeError: window.URL.createObjectURL is not a function

      1 | import React from 'react';
    > 2 | import { Authenticator } from '@aws-amplify/ui-react';
        | ^
      3 | import { CognitoUser } from '@aws-amplify/auth';
      4 | import { amplifyConfig } from './login-style';
      5 |

      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:406)
      at Object.<anonymous> (src/authenticator-hoc.tsx:2:1)
      at Object.<anonymous> (src/authenticator.test.tsx:11:1)
      at TestScheduler.scheduleTests (node_modules/@jest/core/build/TestScheduler.js:333:13)
      at runJest (node_modules/@jest/core/build/runJest.js:404:19)
      at _run10000 (node_modules/@jest/core/build/cli/index.js:320:7)
      at runCLI (node_modules/@jest/core/build/cli/index.js:173:3)

My environment:

node v16.13.2 npm v8.1.2

babel config:

  presets: [
    ['@babel/preset-env', {targets: {node: 'current'}}],
    '@babel/preset-react',
    '@babel/preset-typescript',
  ]

package.json snippet

{
  "dependencies": {
    "@aws-amplify/ui-react": "2.15.0",
    "@babel/preset-env": "7.16.11",
    "@babel/preset-react": "7.16.7",
    "@babel/preset-typescript": "7.16.7",
    "@testing-library/jest-dom": "5.16.4",
    "@testing-library/react": "12.1.4",
    "jest": "27.5.1",
    "jsdom": "16.7.0",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "typescript": "4.6.3"
  }, 
  "jest": {
    "moduleFileExtensions": [
      "js",
      "ts",
      "tsx"
    ],
    "testEnvironment": "jsdom",
    "setupFilesAfterEnv": [
      "<rootDir>/src/setupTests.ts"
    ]
  }

src/setupTest.ts

import '@testing-library/jest-dom';

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 7
Comments: 22 (11 by maintainers)

Most upvoted comments

An update — adding mapbox-gl to package.json (npm i mapbox-gl) got me unstuck, but along the way I started analyzing my next.js app and found this:

For reference, I spent all day yesterday trying to figure out why amplify add api wasn’t working. I haven’t even thought about mapping yet. Along the way of debugging this, I nuked my entire backend environment, took down my production site, all just to debug what seems to be a new version of @aws-amplify/ui-react that was pushed a few days ago with this broken dependency issue.

Nowhere in my app uses a single thing about a map or anything, so why there’s 700kb of a mapping library both breaking my builds and slowing down the app I’m trying to build to be competitive as a startup in 2022… well, Amplify is the only reason I’m not moving forward and have lost my valuable weekend time.

@ErikCH — I get that y’all are moving super fast and that you have an update planned to fix tree shaking and likely this issue. But your team’s got to button up your releases. Amplify is pitched as a time-saving toolkit which is why I selected it, secured $10,000 in AWS credits, and have kept banging my head against the wall trying to get it to work. However, I’m just one dude trying to code an app (which I promise I know how to do, but Amplify has made me feel like I should give up) so super basic stuff like this makes me look for other solutions entirely off AWS.

One other note, while I’m here. The documentation y’all have is a big challenge: to read about Auth, I have to first know about and then read THREE different sections of your website:

Each section focuses on completely different aspects of the auth setup process, in complete isolation. I have been researching Amplify for weeks now. I have a good understanding of how it pieces together. But I’m not encouraged when I come across documentation scattered online I have never seen before, which is what happened yesterday going on this merry debugging journey. I would estimate I’ve spent 20 hours reading Amplify docs in the lead up to starting development. I did my homework. And then y’all shipped an update that broke dependencies and has wasted about 20 more of my hours now debugging it. All of this started because I tried to use DataStore in an SSR context, just like docs say to, and it broke everything.

Anyway. Thanks for listening. I appreciate what y’all are trying to do (ex-Salesforce TA here) and how hard the documentation portion of it is. If you have the ear of program leadership, show them this comment. Whatever your org is doing cost y’all my business.

Love,

The customer you’re trying to attract, the single-developer startup founder

+14

mglikesbikes on Apr 10, 2022

In ui-react 3.4.1 maplibre-gl is still pulled in and the issue of window.URL.createObjectURL not being a function still exists. If either was fixed in 2.15.4 the issue has returned.

johndrewery on Aug 24, 2022

@dave-moser we’re currently working on releasing a fix for the source map warning on the maplibre-gl-js-amplify package - https://github.com/aws-amplify/maplibre-gl-js-amplify/issues/147

We’ve already pushed the change and are looking to release early next week

thaddmt on Apr 15, 2022

I agree regarding the documentation. Decided to drop out the whole ui-react package and write my own classes

funes79 on Apr 12, 2022

In regards to the original issue with Jest not recognizing window.URL.createObjectURL, our recommended workaround is to polyfill the function in your project’s Jest setup file. If you need to create a setup file for Jest, add the following option to your configuration file in the root directory of your project:

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

Then create your jest.setup.js file in the root directory of your project and add the following polyfill:

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

This is based on a proposed workaround regarding this issue in the jsdom library (Issue 1721).

While this workaround will unblock issues with Jest, we recognize it isn’t an ideal solution and we are actively working on ways to address this without relying upon a polyfill for this function being added in the underlying jsdom dependency for Jest. We are also going to add this workaround in our troubleshooting section of the documentation to help developers solve this issue quicker.

slaymance on Apr 21, 2022

Just updated to to 2.15.4 and the issue is resolved. Thanks!

dave-moser on Apr 21, 2022

@sameerdewan @dave-moser The warnings you were seeing should be fixed in the latest version of @aws-amplify/ui-react (2.15.4). Please update to make the warnings go away.

reesscot on Apr 21, 2022

We will release a fix for source map warnings on 4/19. We appreciate your patience until then and apologize for this wait.

Milan-Shah on Apr 18, 2022

@mglikesbikes I feel you! We have the same problem, we spend the whole day trying to understand what was breaking our app. Now we can’t release anything. Supposed to be easy-to-use and since day 1 every time we want to make a change or customize 1 small thing it takes us ages and we can’t find any clear documentation.

roxannelessard on Apr 11, 2022

Thanks @KydneyBeen !

I’m glad you found a workaround. We’ll look at this.

We do have a related fix for next week, that will help with tree shaking, so if you’re not using our new Geo map, it should not affect your build.

ErikCH on Apr 8, 2022