question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

ResizeObserver is not defined in Dashboard Component (React/Jest)

See original GitHub issue

I am attempting to test a form I built that contains this component:

import Uppy from '@uppy/core';
import { useUppy } from '@uppy/react';
import XHRUpload from '@uppy/xhr-upload';
import Dashboard from '@uppy/react/lib/Dashboard';

export default function Uploader({
    config,
    plugins,
    xhrUploadPluginOptions,
    dashboardProps,
    onComplete,
    onRemove
}) {
    const uppy = useUppy(() => {
        const uppyInstance = new Uppy(config)
            .on('complete', onComplete)
            .on('file-removed', onRemove);

        uppyInstance.use(XHRUpload, {
            endpoint: DEFAULT_UPLOAD_API_BASE_URL,
            method: DEFAULT_UPLOAD_API_METHOD,
            fieldName: DEFAULT_UPLOAD_API_FIELD_NAME,
            formData: true,
            withCredentials: true,
            metaFields: [],
            headers: {
                'X-CSRF-Token': csrfToken()
            },
            responseUrlFieldName: 'url',
            getResponseData: responseText => JSON.parse(responseText).data,
            ...xhrUploadPluginOptions
        });

        plugins.forEach(({ plugin, options = {} }) => {
            uppyInstance.use(plugin, options);
        });

        return uppyInstance;
    });

    return (
            <Dashboard
                uppy={uppy}
            />
    );
}

package.json

{
  "dependencies": {
      "@uppy/core": "^2.0",
      "@uppy/react": "^2.0",
      "@uppy/xhr-upload": "^2.0",
  }
}

My tests throws this error for all components that use this uploader:

    ReferenceError: ResizeObserver is not defined

Any help would be much appreciated!

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
Murderloncommented, Sep 28, 2021

Are you using an old node version? We are running tests in Jest as well and we do not face this issue.

0reactions
Murderloncommented, Oct 27, 2021

Closing this as we can’t reproduce. @eaharonoff feel free to re-open if the issue persists with a reproducible example (on codesandbox for instance).

Read more comments on GitHub >

github_iconTop Results From Across the Web

ResizeObserver is not defined in Dashboard Component with ...
Hi. I want to test the page using the uppy dashboard. But there's this problem. ResizeObserver is not defined. at Dashboard.
Read more >
ReferenceError: ResizeObserver is not defined - Stack Overflow
I am writing tests using Jest for component which ...
Read more >
[Solved]-Having trouble Jest testing ajax modules with axios-Reactjs
PASS src/stackoverflow/38129774/ajax.spec.ts ajax ✓ calls status with a login ... "Define is not defined" in Jest when testing es6 module with RequireJS ...
Read more >
How to use Resize Observer with React - DEV Community ‍ ‍
The API · ResizeObserver is used to observe changes to Element's size, · to create our own observer instance we call the ResizeObserver...
Read more >
Errors thrown at chart resize - SciChart
The solution was to modify ResizeObserver function to change the chart div element height not right away but in the next tick. Michael...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found