How to test an API has NOT been called.

[hamidmayeli]

I have created a quick sample if you read the tests, the first 3 tests should fail but the next 3 should pass. However, the results seem to be random.

describe("Test", () => {
    [true, false].forEach(condition => {
        it(`should not call ${condition ? "but does" : "and does not"} call first way`, () => {
            // Arrange
            cy.intercept(
                {
                    method: "POST",
                    url: "/route",
                },
                cy.spy().as("theSpy")
            ).as("post");

            // Code to test
            const click = async () => {
                if (condition)
                    await fetch(
                        "/route",
                        {
                            method: "POST",
                            body: "{'a': 1}",
                        });
            };

            // Act
            cy.mount(
                <div>
                    <button id="btn" type="button" onClick={click}>Test</button>
                </div>
            );

            cy.get("#btn").click();

            // Assert
            cy.get("@theSpy").should("not.have.been.called");
        });

        it(`should not call ${condition ? "but does" : "and does not"} call second way`, (done) => {
            // Arrange
            const theSpy = cy.spy().as("theSpy");

            cy.intercept(
                "POST",
                "/route",
                () => {
                    theSpy();
                }
            ).as("post");

            // Code to test
            const click = async () => {
                if (condition)
                    await fetch(
                        "/route",
                        {
                            method: "POST",
                            body: "{'a': 1}",
                        });
            };

            // Act
            cy.mount(
                <div>
                    <button id="btn" type="button" onClick={click}>Test</button>
                </div>
            );

            cy.get("#btn").click();

            // Assert
            setTimeout(() => {
                expect(theSpy).to.have.not.been.called;
                done();
            }, 100);
        });

        it(`should not call ${condition ? "but does" : "and does not"} call 3rd way`, () => {
            // Arrange
            const theSpy = cy.spy().as("theSpy");

            cy.intercept(
                "POST",
                "/route",
                () => {
                    theSpy();
                }
            ).as("post");

            // Code to test
            const click = async () => {
                if (condition)
                    await fetch(
                        "/route",
                        {
                            method: "POST",
                            body: "{'a': 1}",
                        });
            };

            // Act
            cy.mount(
                <div>
                    <button id="btn" type="button" onClick={click}>Test</button>
                </div>
            );

            cy.get("#btn").click();

            // Assert
            expect(theSpy).to.have.not.been.called;
        });
    });
});

Or

Or

---

So what am I doing wrong and how can I test what I needed?

[DevJSter]

Testing that an API call has not been made can sometimes be tricky due to the asynchronous nature of the test environment. It's possible that the randomness you're experiencing could be due to various factors, such as timing issues or the specific interactions between Cypress, cy.spy(), and cy.intercept(). Let's discuss some potential improvements to your test setup to ensure more reliable results.

1. Ensure Spies are Reset:
   Before each test, it's a good practice to reset the spies to ensure that any state from previous tests doesn't carry over and affect the current test.

   beforeEach(() => {
     cy.spy().as("theSpy");
   });

2. Using .wait() Command:
   Sometimes, adding a .wait() command after the action can help ensure that Cypress waits for any potential asynchronous actions to complete before running assertions.

   cy.get("#btn").click();
   cy.wait(100); // Wait for any potential async actions to complete
   cy.get("@theSpy").should("not.have.been.called");

3. Using cy.then():
   You can also use .then() to chain assertions together, which might help with the sequencing of commands and assertions:

   cy.get("#btn").click().then(() => {
     cy.get("@theSpy").should("not.have.been.called");
   });

4. Check Network Requests Directly:
   Instead of relying solely on spies, you can directly check the network requests using cy.route() and assertions on the network requests array. This can help ensure that you're directly checking the network traffic.

   cy.intercept("POST", "/route").as("post");
   cy.get("#btn").click();
   cy.wait("@post", { timeout: 1000 }).should("not.exist");

5. Increased Timeout for cy.wait():
   If you encounter timing issues, you can increase the timeout for cy.wait(). Be cautious with this approach, though, as long waits can make the test slower.

   cy.wait("@post", { timeout: 3000 }).should("not.exist");

6. Use a Custom Cypress Command:
   Consider encapsulating the check into a custom Cypress command to ensure better code organization and readability.

   Cypress.Commands.add("shouldNotHaveBeenCalled", (alias) => {
     cy.get(`@${alias}`).should("not.have.been.called");
   });

   Usage:

   cy.shouldNotHaveBeenCalled("theSpy");

Remember that timing and the interactions between different Cypress commands can sometimes lead to unpredictable behavior. By using a combination of strategies like resetting spies, adding .wait(), checking network requests directly, and organizing your code with custom commands, you can improve the reliability of your tests when verifying that an API call has not been made.

[hamidmayeli]

Thank you, @DevJSter. I had tried the cy.wait() but it makes the test time consuming. But the points you mentioned help me to find the solution.

A random question: do you have any idea about #27309 ?

[DevJSter]

Am currently tired I'll tell you tomorrow morning!!! Until then Have a great day

[hamidmayeli]

Much appreciate that.

[msmosavar]

But the points you mentioned help me to find the solution.

@hamidmayeli Please share if you come across a reliable solution.