CryptoKey is not defined fails only on Firefox

[NanoCode012]

Hello, I am currently trying out cypress, but met an error CryptoKey is not defined. I am trying to sign a fake jwt using jose https://github.com/panva/jose/blob/main/docs/classes/jwt_sign.SignJWT.md#readme .

From what I understand, jose would use the browser/node's runtime crypto library. Since, cypress launches a browser, I do not think it should be a problem, but it would seem to be related. I do not see any Issues on both repo talking about it. I can use the jose library on my own nextjs code. It is only Cypress (and also Jest) which had this issue.

Test code:

context("Signed-in", () => {
    it.only("test", () => {
      cy.fixture("token.json").then(async (json) => {
        const updatedJson = {
          ...json,
          exp: Math.round((Date.now() + 10000) / 1000), // change exp time
        };

        const key = new TextEncoder().encode('secret');

        const jwt = await new jose.SignJWT(updatedJson)
          .setProtectedHeader({ alg: "HS256" })
          .sign(key); // <--- error here

        json.cy.setCookie("token", jwt);
      });

      cy.url().should("include", "/home");
    });
  });

Environment:

• Firefox: 103
• Cypress : 10.4.0

Tested working other browsers(Edge, Electron, Chrome), but fails on Firefox.

Edit: My workaround is to test on Chrome instead, and manual test on Firefox when needed.

[nathansamson]

In case someone is looking for an answer.

A similar issue (with same root cause) and workaround is mentioned in #14600 (comment)

It took me several hours after finding this discussion (with no reply) before I found the other bug report and thought "this sounds similar"