Skip to content

Dropzone is not a constructor when testing component with jest #60

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
thegalang opened this issue May 12, 2021 · 2 comments
Closed

Dropzone is not a constructor when testing component with jest #60

thegalang opened this issue May 12, 2021 · 2 comments
Milestone

Comments

@thegalang
Copy link

thegalang commented May 12, 2021

im trying to create test using jest. I'm getting error TypeError: Dropzone is not a constructor while running the web works.

I tried downloading the source code and putting in on my project. This works, but Im looking for a way to import the library which is cleaner. Here is the relevant code. Handle functions are omitted for brevity:

<script>
    import {uploadFileWithAuth} from '../../api/request.js'
    import {Circle} from 'svelte-loading-spinners';
    import Dropzone from 'svelte-file-dropzone';
    import { BASE_API_URL } from '../../api/context.js';
 
    export let style;
    export let maxSize = 5; // max file size in megabytes
    export let file = ''
    export let required = ""
    export let accept = '.pdf'
</script>
 
<Dropzone on:droprejected={handleRejectedFile} on:dropaccepted={handleAcceptedFile} disableDefaultStyles={true} multiple={false} {accept} maxSize={maxSize * 1000000}
      containerStyles="
      width: 10em;
      height: 10em;
      border: 2px dashed rgba(0, 0, 0, 0.53);
      border-radius: 10px;
      font-family: 'Poppins';
      font-size: 12px;
      cursor: pointer;
      color: #000000;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: 1em;
      "
  >
    <img id="file-upload" alt="Upload File" src="images/upload.svg" />
    <p>Drag to upload or click this</p>
  </Dropzone>

And here is the testing code:

import FileInput from './FileInput.svelte';
import {render} from '@testing-library/svelte'
describe("File input test", () => {
    it("Should render perfectly", () => {
        const { getByTestId } = render(FileInput);
        expect(getByTestId("file-input")).toBeInTheDocument(); 
    })
})
@thegalang
Copy link
Author

thegalang commented May 12, 2021

i solved this temporarily by including from svelte-file-dropzone/src/index.js and adding svelte-file-dropzone to jest.config.js transformIgnorePatterns

@arackaf
Copy link
Collaborator

arackaf commented Apr 7, 2024

Hey! We've revamped the package, and how it's published. Can you give this a fresh try and let us know if it doesn't work? (and please provide a repro we can look at, if not)

@arackaf arackaf closed this as completed Apr 7, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants