javascript - 如何使用 Jest 测试 img.onload？

Question

我受困于 img.onload 事件测试。我知道这是一个异步操作，应该被 mock ，但我仍然不知道如何解决这个问题。我也见过几个类似的案例，但它们与这个不同。

以前访问过:

• How do you use Jest to test img.onerror
• How to test asnyc code with Jest ( or test "image.onload" with jsdom )
• How do I test `image.onload` using jest in the context of redux actions (or other callbacks assigned in the action)

要测试的代码:

  function funcToTest(img, callback) {
    const img = new Image()
    img.src = img

    img.onload = () => {
      callback(true) // should return callback with true on finish
    }

    img.onerror = (e) => {
      callback(false) // should return callback with false on error
      console.log(e) 
    }
  }

  funcToTest()

测试环境:

describe('tet it', () => {
  it('test', done => {
    const callback = status => {
      expect(status).toEqual(true) // but nothing happen
      done()
    }

    funcToTest('some_image', callback)
  })
})

我在完成时也遇到错误:

    Timeout - Async callback was not invoked within the 5000ms timeout specified by jest.setTimeout.
        > 2 |   it('test', done => {...

提前致谢!

Answer 1

虽然有人回答了这个问题，但我不同意该解决方案的目的。

我们不应该为了通过覆盖率而编写测试，我们应该编写证明观点的测试，并确保代码片段按预期运行。

测试它的方法是模拟 Image 构造函数并将其替换为将调用 onload 函数的东西。

describe('tet it', () => {

  it('test', done => {
    global.Image = class {
      constructor() {
        setTimeout(() => {
          this.onload(); // simulate success
        }, 100);
      }
    }

    const callback = status => {
      done()
    }

    funcToTest('some_image', callback)
  })
})

该方法假设“浏览器”将在 100 毫秒内下载图像，您可以调整失败的代码，或者如果您需要在两者之间共享此行为，则将其部分移动到 beforeEach测试。