javascript - 在 Jest JS 中返回一个 double

Question

我想测试一个像这样的简单函数:

const saveAs = (fileName, content, contentType) => {
 const a = createDownloadLink(fileName, content, contentType)
 a.click()
}

export const createDownloadLink = (fileName, content, contentType) => {
 ...
 const a = document.createElement('a')
 ...
 return a
}

export default saveAs

我想测试一下，当我调用 saveAs 时，会调用 createDownloadLink，并在结果上调用 click。

我尝试过模拟 createDownloadLink 并在其上创建一个 spy 。但是，我找不到如何测试点击结果:

Jest JS 测试:

  const createDownloadLink = jest.fn()
  saveAs('file.html', '<h1>hello</h1>', 'test/plain;UTF-8')
  expect(createDownloadLink).toBeCalled() // And return a double
  // expect(double.click).toBeCalled
})

Answer 1

我知道您已经回答了自己的问题，但既然您已经说过您不喜欢将功能分成两个文件，我可能有替代解决方案。既然你无论如何都要导出这两个函数，我可以建议你实际上将这两个函数都制作为同一个对象的一部分吗？这将允许您轻松模拟或监视模块功能。例如，假设您有 saver.js:

class Saver {
  saveAs(fileName, content, contentType) {
    const a = this.createDownloadLink(fileName, content, contentType)
    a.click()
  }

  createDownloadLink(fileName, content, contentType) {
    const a = document.createElement('a')
    return a
  }
}

const saver = new Saver();
export default saver;

那么你的测试将如下所示:

import saver from './saver'

describe('saveAs', () => {
  it("calls click on download link", () => {
    const click = jest.fn()
    saver.createDownloadLink = jest.fn(() => ({ click }));
    saver.saveAs('file.html', '<h1>hello</h1>', 'test/plain;UTF-8')
    expect(click).toHaveBeenCalled();
  })
})