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并对其进行监视。但是，我找不到如何测试点击结果的方法：

开玩笑的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();
  })
})

Answer 2

我终于通过创建一个用作双精度对象的中间对象解决了这个问题。

不幸的是，为了使用`jest.mock，我不得不将我的功能分成2个文件。

import saveAs from './index'
import createDownloadLink from './utils'
jest.mock("./utils");

describe('saveAs', () => {
  it("calls click on download link", () => {
    const downloadLinkDouble = {}
    const clickMock = jest.fn()
    downloadLinkDouble.click = clickMock
    createDownloadLink.mockImplementation(() => downloadLinkDouble)

    saveAs('file.html', '<h1>hello</h1>', 'test/plain;UTF-8')

    expect(clickMock).toHaveBeenCalled()
  })
})

在Jest JS中返回双精度值

2 个答案: