Fun with Cypress Fixture Files

aws-jwt-verify uses Conditional exports to support both Node.js and browser environments.

{
  "imports": {
    "#node-web-compat": {
      "browser": "./node-web-compat-web.js",
      "default": "./node-web-compat-node.js"
    }
  }
}

The primary unit tests use Jest and run under Node.js, which means the browser imports are not used. This is addressed by also testing with a Vite-based web application using Cypress.

In 2022, when first using Cypress, I was smart enough to use fixture files. There is a tests/vite-app/util/generateExampleTokens.ts that generates JWT tokens and the corresponding JSON Web Key Set (JWKS), then saves into the web application and as fixtures for the Cypress tests.

const JWKSFILE = "example-JWKS.json";

saveFile("public", JWKSFILE, jwks);
saveFile(join("cypress", "fixtures"), JWKSFILE, jwks);

saveFile(join("cypress", "fixtures"), "example-token-data.json", tokendata);

However, I was not smart enough to read the docs about using cy.fixture(). I instead abused TypeScript Resolve JSON Module (resolveJsonModule).

import { JWKSURI } from "../fixtures/example-token-data.json";

I used the JWKSURI value in cy.intercept() below:

  beforeEach(() => {
    cy.intercept("GET", JWKSURI, { fixture: "example-JWKS" });
  });

Recently, I wanted to add another test for our SimpleFetcher. Instead of spying and stubbing the network request and response, I wanted to actually fetch over http and compare against fixtures/example-JWKS.json data. I built up a shell of the test, then wasn’t sure what I to do next, so I asked Amazon Q Developer.

in the selected cypress test, how do I compare the result of the fetcher to the JSON data from the fixture file

I got a nice explanation, and the full test code. Below are the important lines:

    cy.fixture("example-JWKS.json").then((jwksData) => {
      const fetcher = new SimpleFetcher();

      fetcher.fetch(JWKSURI).then((jwks) => {
        expect(jwks).to.deep.equal(jwksData);
      });
    });

Then I wondered if there was a better way to reference JWKSURI and asked Q Developer this followup question.

is there a more semantic way to get the JWKSURI value than using an import in the selected code? should I use cy.fixture instead?

Of course there was. Below is the final code for tests/vite-app/cypress/e2e/fetcher.cy.ts:

/// <reference types="cypress" />
import { SimpleFetcher } from "aws-jwt-verify/https";

describe("Fetcher", () => {
  let tokenData;

  beforeEach(() => {
    cy.fixture("example-token-data.json").then((data) => {
      tokenData = data;
    });
  });

  it("Simple JSON fetcher works", () => {
    cy.visit("/");

    cy.fixture("example-JWKS.json").then((jwksData) => {
      const fetcher = new SimpleFetcher();

      fetcher.fetch(tokenData.JWKSURI).then((jwks) => {
        expect(jwks).to.deep.equal(jwksData);
      });
    });
  });
});