Any sample repo on seeding data in Cypress?

[neldeles]

mswjs/data + RTL is a breeze to work with. I'm trying out Cypress for the first time now and a bit lost on how to mock and reset data across tests?

For example, in RTL I can drop the db before each test, then just create the necessary mock data for each test:

// in setupTests.js
beforeEach(() => {
  drop(db);
});

// sample.test.js
test("renders a task", async () => {
  db.task.create({ task: "First task", status: "today", priority: 1 });
  renderWithProviders(<App />);
});

Where exactly do I call db.task.create({ task: "First task", status: "today", priority: 1 }); in Cypress? I've tried the ff to no avail:

import { db } from "mocks/db";

describe("This Week Column", () => {
  beforeEach(function () {
    db.task.create({ task: "First task", status: "today", priority: 1 });
    cy.visit("/");
  });
  it("renders a task", () => {
    // ... some assertions here
  });
});

[kettanaito]

Hey, @neldeles. Thanks for raising this.

To understand how to control your db between Cypress tests you need to understand how Cypress loads your app first. Cypress runner is its own process, while your running app is a different process (which you cy.visit). That's why the db you import in your Cypress test and in your app are two different db instances.

In order to change db on test runtime, you have to access the same instance that your app is accessing. That is possible if you persist that instance on window, since Cypress can share data between the tests and your app via window.

// your-app.js
const db = factory({ ... })

// Set the database reference on "window"
// so that Cypress tests can access it.
window.db = db

export { db }

Then, in your tests:

import { drop } from '@mswjs/data'

describe('This Week Column', () => {
  beforeEach(async () => {
    await cy.window().then(win => {
      drop(win.data)
    })
  })
})

Importing drop in the test directly should be fine since it accepts any database and drops it. You may still want to experiment with that, though, as I don't remember all the correct Cypress syntaxes.

[neldeles]

Thank you this pointed me towards the right direction. I had to make some additional changes to your solution, and it seems it's related to this issue. Looks like the race condition applies for this scenario as well.

My complete solution:

// index.tsx
if (process.env.NODE_ENV === "development") {
  const { worker } = require("./mocks/browser");
  worker.start();
}

if (window.Cypress) {
  window.appReady = true;
}

const queryClient = new QueryClient();
queryClient.setQueryDefaults(["tasks"], { staleTime: Infinity });

ReactDOM.render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <Router>
        <App />
      </Router>
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

Then in my db.ts file:

// db.ts
declare global {
  interface Window {
    // ignore that these are set to any for now lol
    db: any;
    msw: any;
    Cypress: any;
    appReady: any;
  }
}

const db = factory({ ... })

window.db = db;
export { db };

Then in my Cypress tests:

describe("This Week Column", () => {
  beforeEach(() => {
    cy.visit("/");
    cy.window().then((win) => {
      // this clears the db
      drop(win.db);
     // this seeds the db
      win.db.task.create({
        task: "First task",
        status: "thisWeek",
        priority: 1,
      });
    });
    cy.window().should("have.property", "appReady", true);
  });
});

I must say though, I think I'll stick to the RTL + MSW + MSW/Data + Storybook test workflow for now. Was hoping MSW + Cypress could replace it. Cypress relegated to E2E duties for now.

Thanks again for the help and excellent work. It truly is a great library (esp for juniors like me). Looking forward to contributing once I have more experience under my belt. 😅 (if you have tips on what to start reading up on to be able to contribute to MSW-related things do share them ❤️)

[kettanaito]

Happy to hear you've got it resolved. Alternatively, you can defer the mounting of your app, as the race condition may also happen while developing locally. See Deferred mounting.

We'd love to see you as a contributor! There are issues
marked with the "good first issue" label all across our organization. Take a look if anything sparks your interest.

There are multiple areas we're tackling, so it's hard for me to recommend a single material to read about. I suggest approaching matters on the issue basis: find what seems interesting, dive into the source code around it, and don't be afraid to submit a PR even if there are uncertainties. I can help you with the code review, which is the main way to learn.

[msongela]

// in setupTests.js
beforeEach(() => {
drop(db);
});

// sample.test.js
test("renders a task", async () => {
db.task.create({ task: "First task", status: "today", priority: 1 });
renderWithProviders();
});