赛普拉斯 - 测试没有任何反应

Question

我有一个“Go Google”按钮和一个输入框。

当输入框中有内容时，单击该按钮将打开一个新选项卡，供用户浏览另一个网站。 否则，单击按钮将不会触发任何内容。

应用程序.tsx

import "./styles.css";
import React, { useState } from "react";

export default function App() {
  const [input, setInput] = useState("");

  const onButtonClick = () => {
    if (input !== "") {
      window.open("www.google.com");
    }
  };

  return (
    <div className="App">
      <input value={input} onChange={(e) => setInput(e.target.value)} />
      <button onClick={onButtonClick}>Go Google</button>
    </div>
  );
}

如何使用 Cypress 编写测试用例进行测试，在 Cypress 中单击按钮时没有任何反应？

代码沙盒
https://codesandbox.io/s/react-typescript-forked-vovdht?file=/src/App.tsx:0-430

Answer 1

您可以存根window object 并为其命名。 这样你就可以检查它是否被调用。

您还可以将data-cy添加到测试主题，以便您可以拥有一个仅用于测试的专用选择器。

      <button onClick={onButtonClick} data-cy="google-btn">Go Google</button>

describe('When button is clicked', () => {
    it('does not open a new window', function () {
        cy.window().then((win) => {
            cy.stub(win, 'open', url => {
                win.location.href = url;
            }).as("wndopen")
        })
        cy.get('[data-cy="google-btn"]').click()
        cy.get('@wndopen')
            .should("not.be.called")
    })
})