Question

在Angular中，我正在编写一个具有图像字段的对象。加载图像的方法返回在图像onload函数中解析的promise。

现在，为了测试该方法，我使用了flushMicrotasks（）函数。不幸的是，它没有像我期望的那样工作:)。

重现我的问题的简化代码：

describe("Flag", () => {

    it("should turn to true", fakeAsync(() => {

        let flag = false;
        let p = new Promise((resolve) => {
            let img = new Image();
            img.onload = () => {
                resolve();
            }

            img.onerror = () => {
                // handle error
                console.log('error');
            }
            img.src = "path/to/image";
        });

        p.then(() => {
            flag = true;
        })

        flushMicrotasks();
        expect(flag).toBe(true);

    }));
})

有人可以向我解释为什么测试没有通过。为什么flushMicrotasks（）无法解析承诺，如果它在图像的上传？如果我们将resolve（）置于onload之外，则测试通过。

Answer 1

很可能onload无法与zone.js配合使用，请尝试使用适当的onload调用替换addEventListener。

Answer 2

kemsky建议使用addEventListener没有帮助。我通过将expect放入then回调并使用done来处理我的问题：

describe("Flag", () => {

    it("should turn to true", (done) => {

        let flag = false;
        let p = new Promise((resolve) => {
            let img = new Image();
            img.onload = () => {
                resolve();
            }

            img.onerror = () => {
                // handle error
            }
            img.src = "path/to/image";
        });

        p.then(() => {
            flag = true;
            expect(flag).toBe(true);
            done();
        })
    });
})

现在测试似乎工作正常。

flushMicrotasks不能与image.onload一起使用

2 个答案: