typescript - 如何在 Jest 中模拟 navigator.clipboard.writeText()？

Question

在查看了 Jest 问题和 SO answers 后，我尝试了以下 4 个选项，但我遇到了 TypeScript 错误或运行时错误。我真的很想让选项 1 (spyOn) 工作。

// ------ option 1 -----
// Gives this runtime error: "Cannot spyOn on a primitive value; undefined given"
const writeText = jest.spyOn(navigator.clipboard, 'writeText');

// ------ option 2 -----
Object.defineProperty(navigator, 'clipboard', {
    writeText: jest.fn(),
});

// ------ option 3 -----
// This is from SO answer but gives a TypeScript error
window.__defineGetter__('navigator', function() {
    return {
        clipboard: {
            writeText: jest.fn(x => x)
        }
    }
})

// ------ option 4 -----
const mockClipboard = {
    writeText: jest.fn()
};
global.navigator.clipboard = mockClipboard;

Answer 1

Jest测试在JSdom环境中运行，并且并非所有属性都已定义，但是您应该在监听该函数之前先定义该函数。

这是一个例子:

Object.assign(navigator, {
  clipboard: {
    writeText: () => {},
  },
});

describe("Clipboard", () => {
  describe("writeText", () => {
    jest.spyOn(navigator.clipboard, "writeText");
    beforeAll(() => {
      yourImplementationThatWouldInvokeClipboardWriteText();
    });
    it("should call clipboard.writeText", () => {
      expect(navigator.clipboard.writeText).toHaveBeenCalledWith("zxc");
    });
  });
});

编辑:也可以使用 Object.defineProperty，但是它接受描述符对象作为第三个参数

Object.defineProperty(navigator, "clipboard", {
  value: {
    writeText: () => {},
  },
});