Cypress React E2E Test - MongoDB Realm Backend call Promise never send

Question

we are encountering a strange issue while running a Cypress E2E Test for our React application we just can not explain. Our configuration:

TypeScript

React v17

MongoDB Realm (realm-web) v1.7

We are testing our application with Cypress v12.11.0.

The test case is the following

import { login } from "../utils/loginHelper";

/**
 * Properties test
 * Ensure that properties of all types can be created, altered and disabled.
 */
describe("Properties Tests", () => {
  before("Prepare", () => {
    login("internal");
    cy.wait(4000);
  });

  it("Create properties of type tag", () => {
    cy.get("[id=aside-settings]").click();
    cy.wait(4000);
    cy.get("[id=setting-property]").click();
    cy.get("[id=new-property]").click();
    cy.get("[id=property-name]").type("Test Tag");
    cy.get("[id=property-description]").type("Beautiful description for a test tag");
    cy.get("[id=property-submit]").click();
    // Issue occurs here - on the 2nd click the property should be inserted into the database. When testing this manually it works without any problem. But when running the testsuite the call never reaches the backend.
    cy.get("[id=property-submit]").click();
  });

  after("Logout", () => {
    cy.get("[id=aside-logout]").click();
  });
});

The function that is executed on the 2nd click on the property-submit button is:

handleCreateProperty = async () => {
    const { property } = this.props;
    const { name, description, type } = this.state;
    this.setState({ saving: true });
    const prop = {
      _id: property ? property._id : new BSON.ObjectId(),
      name: { en: name },
      description: { en: description },
      type: type.value,
      disabled: false,
    };
    let result;
    if (property) {
      result = await updateProperty(prop);
    } else {
      // This line is reached and executed but the promise resulting from this never ends!
      result = await insertProperty(prop);
    }
    // [...]
}

The insertProperty function (and related ones) look as following:

/**
 * Inserts a new property into the database.
 * @param property: Property that should be inserted into the database
 * @returns { Promise<Realm.Services.MongoDB.InsertOneResult<Property> | false> } Result of the function
 */
export async function insertProperty(
  property: Property
): Promise<Realm.Services.MongoDB.InsertOneResult<Property> | false> {
  return callUpsertProperty(property, true);
}

/**
 * Calls the upsert property function in backend.
 * @param property: Property that should be upsert
 * @param insert: True for insert, else update
 * @returns { Promise<false | Realm.Services.MongoDB.InsertOneResult> | Promise<Realm.Services.MongoDB.UpdateResult> } Result of the function
 */
async function callUpsertProperty(property: Property, insert: boolean) {
  return callFunction(UPSERTPROPERTY, [property, insert]);
}

/**
 * Calls the given function with the given args in backend.
 * @param functionName: Name of the function that should be called
 * @param args: Arguments that should be passed to the function
 * @returns { any } Return value of the function
 */
export async function callFunction(functionName: string, args: Array<any>) {
  // This line is reached but the promise never resolves/rejects - also the call is never reaching
  // the backend
  return userService.getUser()?.callFunction<any>(functionName, [...args]);
}

In MongoDB Realm we see the following logs:

The login is working fine, the getContext is called as soon a user is logged in. The getDashboardStatistics is some statistic data that is shown on the landing page. After that every callFunction execution is just lost somehow.

When running the testsuite in the Cypress UI we tried to reload the page after the testrun and even the getContext function was never reaching the backend in that case.

As we can run this test manually and it just works fine we assume that the issue is on Cypress side but we have found no clue what the issue could be...

For completeness out cypress.config.ts:

import { defineConfig } from "cypress";

export default defineConfig({
  e2e: {
    setupNodeEvents(on, config) {},
    baseUrl: "http://localhost:3000",
    supportFile: false,
    video: false,
    viewportWidth: 1920,
    viewportHeight: 1080,
  },
});

tl;dr: After executing 2 calls to the mongoDB realm backend correctly all calls to the backend are just lost without every resolving/rejecting

We did the test manually under the same circumstances like in the testsuite and it worked fine. We played around with the Cypress config, used all different supported browsers, disabled chrome web security etc. nothing changed the result.

I also ran wireshark and the call to the backend is never send.

Answer 1

Try the following setting in your config:

testIsolation: false,

That setting has been causing some issues with the v12. Also, can you check if this works with any of the older <=v10?