在 cypress 上测试复制到剪贴板

Question

我正在开发一个 next.js 项目，我必须在 cypress 上测试该项目，我需要测试的项目的一部分是将文本复制到剪贴板的按钮。

复制到剪贴板功能；

  const copyToClipboard = (url: string) => {
    navigator.clipboard.writeText(url);
    toast({
      title: "Copied to clipboard",
      status: "success",
      duration: 2000,
      isClosable: true,
    });
  };

代码（我使用 chakra ui 作为前端）

<Box>
  <Heading>
    {item.title ? item.title : item.original_url + " - undefined"}
  </Heading>

  <Text>cxorz.vercel.app/{item.short_path}</Text>
  <Text>Long URL: {item.original_url}</Text>
  <IconButton
     icon={<CopyIcon />}
     aria-label="Copy URL"
     onClick={() => copyToClipboard(`${baseUrl}/${item.short_path}`)}
     data-id="copy-url"
  />
</Box>

这就是我测试代码的方式

it("shortened link is visible to user", ()=>{
 
  cy.visit("/dashboard/links")
  cy.window().then(win => {
     cy.stub(win.navigator.clipboard, 'writeText').as('copy');
     cy.getByDataId("copy-url").click()
     cy.get('@copy').should('have.been.calledOnce', 'czors.vercel.app/google')
  })
})

但随后我收到错误“尝试存根未定义的属性‘writeText’”

Answer 1

我在朋友的帮助下解决了这个问题。首先我们为 navigator.clipboard 对象创建一个模拟，然后存根写入测试方法

cy.window().then((win) => {
    if (!win.navigator.clipboard) {
        win.navigator.clipboard = {
          writeText: () => {}
        };
      }
    cy.stub(win.navigator.clipboard, "writeText").resolves().as('clipboardWrite');
  });
cy.getByDataId("copy-url").click();
cy.get('@clipboardWrite').should(
    'have.been.calledOnceWith',
    'https://cxorz.vercel.app/search',
)

并且成功了