Jest test fails on error thrown by package mapbox-gl

[KydneyBeen]

amplify-ui/packages/react/package.json

Line 71 in 27ea4f0

"mapbox-gl": "npm:[email protected]",

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';

[funes79]

Same issue here.

2022-04-08T12:34:46.720Z [WARNING]: Failed to compile.
2022-04-08T12:34:46.721Z [WARNING]: ./node_modules/react-map-gl/dist/esm/components/map.js
                                    Module not found: Can't resolve 'mapbox-gl' in '/codebuild/output/src628865664/src/qtbw/qtbw/node_modules/react-map-gl/dist/esm/components'
                                    Import trace for requested module:
                                    ./node_modules/react-map-gl/dist/esm/index.js
                                    ./node_modules/@aws-amplify/ui-react/dist/esm/components/Geo/MapView/index.js
                                    ./node_modules/@aws-amplify/ui-react/dist/esm/index.js
                                    ./pages/_app.js
                                    > Build failed because of webpack errors

[ErikCH]

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.

[mglikesbikes]

@ErikCH — it's affecting builds in the amplify console:

                                    Module not found: Can't resolve 'mapbox-gl' in '/codebuild/output/src095412605/src/App/node_modules/react-map-gl/dist/esm/components'
                                    Import trace for requested module:
                                    ./node_modules/react-map-gl/dist/esm/index.js
                                    ./node_modules/@aws-amplify/ui-react/dist/esm/components/Geo/Geocoder/index.js
                                    ./node_modules/@aws-amplify/ui-react/dist/esm/index.js
                                    ./pages/sign-in.js

My ./pages/sign-in.js:

import { withSSRContext } from "aws-amplify";
import { useRouter } from "next/router";

export default function Auth() {
  const router = useRouter();
  const { route } = useAuthenticator((context) => [context.route]);

  return <div data-layout>…</div>;
}

Thought I was going crazy all day but no, I'd just upgraded amplify packages. Sheesh. Sheesh. Gonna go take a break now.

[mglikesbikes]

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:

• Authentication - Getting Started
• Authentication - Overview
• Authentication - Creating a custom auth flow

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

[raffpaquin]

I couldn't agree more with @mglikesbikes.

[roxannelessard]

@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.

[Milan-Shah]

We apologize you are having this issue. We are currently working on implementing a fix for this and will update here shortly!

[ErikCH]

Hi @mglikesbikes , @raffpaquin @roxannelessard !

Thanks for the feedback. We are working on some additional checks of our releases to make sure that we catch things like this up front.

We have just made a new release, @aws-amplify/[email protected] that should tree-shake out the maplibre package if you're not using it. This would solve the jest issue, and reduce the bundle size.

Let me know if that fixes your issue.

If you are using the map component in your app, and you're still having an issue with Jest, let me know, and we can investigate further.

[ErikCH]

And @mglikesbikes !

I passed your concern on the documentation to our documentation team, to see if we can improve it for the future. It should NOT take you 20 hours in the Amplify docs to get up and running. We need to make looking up things easier.

[KydneyBeen]

Hi @mglikesbikes , @raffpaquin @roxannelessard !

Thanks for the feedback. We are working on some additional checks of our releases to make sure that we catch things like this up front.

We have just made a new release, @aws-amplify/[email protected] that should tree-shake out the maplibre package if you're not using it. This would solve the jest issue, and reduce the bundle size.

Let me know if that fixes your issue.

If you are using the map component in your app, and you're still having an issue with Jest, let me know, and we can investigate further.

Glad to hear it! I should have locked in my package versions anyways.

I suspect if someone were using the maplibre package it would probably still produce this issue. It seems to mess with jsdom's mock Window interface, so anyone using that interface (in my case for unit tests with jsdom), they'll probably still encounter this problem.

Ditto about the docs; it was tough to find all the information in all the different locations:

https://ui.docs.amplify.aws/
https://docs.amplify.aws/lib/q/platform/js/
https://aws-amplify.github.io/amplify-js/api/classes/authclass.html
https://docs.aws.amazon.com/amplify/latest/userguide/welcome.html

And in the end I often just read the code. Documentation on how to test the Auth UI would be cool; I worked around it because of some crypto issue with the mock browsers.

[funes79]

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

[dave-moser]

I am able to successfully run my React app, however, I started receiving 12 warnings about maplibre-gl-js-amplify. I am not using mapping or geo in my app. I have installed "@aws-amplify/ui-react": "^2.15.3", and "aws-amplify": "^4.3.20",

WARNING in ./node_modules/maplibre-gl-js-amplify/lib/esm/AmplifyMapLibreGeocoder.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/frontend/node_modules/maplibre-gl-js-amplify/src/AmplifyMapLibreGeocoder.ts' file: Error: ENOENT: no such file or directory, open '/frontend/node_modules/maplibre-gl-js-amplify/src/AmplifyMapLibreGeocoder.ts'

[thaddmt]

@dave-moser we're currently working on releasing a fix for the source map warning on the maplibre-gl-js-amplify package - aws-amplify/maplibre-gl-js-amplify#147

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

[sameerdewan]

Just ran into this one as well. @thaddmt thanks!

[Milan-Shah]

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

[reesscot]

@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.

[dave-moser]

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

[slaymance]

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]

@funes79 @mglikesbikes @roxannelessard I believe the issue of not resolving the mapbox-gl module is different than the Jest problem originally reported in this issue. If you're interested in helping us solve that particular problem, I'll direct you to a separate issue where we're tracking that exact error: Issue 1736.

[slaymance]

We've updated our troubleshooting documentation to provide a workaround to this issue in Jest and we will continue to find a long-term solution on our end to the polyfilling problem.

[johndrewery]

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.

[reesscot]

@johndrewery The maplibre-gl is still a dependency of @aws-amplify/ui-react and window.URL.createObjectURL be polyfilled in Jest tests. See https://ui.docs.amplify.aws/getting-started/installation#jest