Jest: 'onload' event of FileReader object is not fired

[rproenca]

I'm trying to use FileReader object but 'onload' event is not fired.

I know that Jest uses jsdom behind the scenes. But I did a test using jsdom only and it worked! Please find below 1) a scenario using jsdom only (does work) 2) a scenario using Jest (does not work).

(I'm new to Jest so perhaps I could be missing something obvious; I'm sorry if that's the case...)

jsdom:

var jsdom = require("jsdom");

jsdom.env(
    '',
    function(err, window) {
        function dataURLtoFile(dataurl, filename) {
            var arr = dataurl.split(','),
                mime = arr[0].match(/:(.*?);/)[1],
                bstr = window.atob(arr[1]),
                n = bstr.length,
                u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new window.File([u8arr], filename, {
                type: mime
            });
        }

        var imageB64 = 'data:image/png;base64,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';
        var file = dataURLtoFile(imageB64, 'myfile');
        var reader = new window.FileReader();

        // 'ONLOAD' EVENT IS FIRED SUCCESSFULLY
        reader.addEventListener("load", function(event) {
            console.log(reader.result);
        });

        reader.readAsDataURL(file);
    }
);

Jest:

test('event "onload" is not fired', function() {
    function dataURLtoFile(dataurl, filename) {
        var arr = dataurl.split(','),
            mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]),
            n = bstr.length,
            u8arr = new Uint8Array(n);
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
        }
        return new File([u8arr], filename, {
            type: mime
        });
    }

    var imageB64 = 'data:image/png;base64,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';
    var file = dataURLtoFile(imageB64, 'myfile');
    var reader = new FileReader();

    // 'ONLOAD' EVENT IS NOT FIRED
    reader.addEventListener("load", function(event) {
        console.log("'load' event has been fired!");
    });

    reader.readAsDataURL(file);
});

Thanks!

[thymikee]

You should pass a done callback because this is async code

test('event "onload" is not fired', function(done) {
    // test code...
    reader.addEventListener("load", function(event) {
        console.log("'load' event has been fired!");
        try {
          expect(expected).toEqual(received);
          done();
        } catch(error) {
          done.fail(error);
        }
    });
}

Since expect can throw error, you need to wrap in try/catch clause, so done can be always called.