Skip to content

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

Closed
@thegalang

Description

@thegalang

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(); 
    })
})

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions