How to unit test and e2e test remix app that has Express as adapter server.

[krnbr]

How to unit test and e2e test remix app that has Express as adapter server.

Any initial point of how(s), where(s), what(s) and why(s)?

Was unable to see that in the docs

[sergiodxa]

For unit tests what you use as an adapter doesn't really matter. You can write React components tests or even tests loaders and actions.

Example of loader/actions:

import { loader } from "some-route";

test("it should work as expected", async () => {
  let request = new Request("/")
  let response = await loader({ request, params: {}, context: {} })
  let body = await response.json()
  expect(body).toEqual({ works: true });
});

For actions is the same but you make the Request has method: "POST" and set a body with the data you need using URLSearchParams

let body = new URLSearchParams({ field: "value" })
let request = new Request("/path", { method: "POST", body })

For React components it's the same as without Remix, import component, use Testing Library React, and test it, only issue is that you can't (for now) tests components using Remix hooks or components (like Form), so you can only test components unaware of Remix.

---

For E2E tests you can use Cypress, write your tests, run the server, run Cypress, that's it.

[nicholaschiang]

Any idea how to instrument Remix's application code? It seems like they use esbuild (see their technical docs) and I'm not sure how to get something like nyc or istanbul working with that... do you have any pointers?

[cjbland]

@krnbr were you able to make any progress with this? I've been trying to write some e2e tests with cypress with the hopes of using intercept to handle some third party library interaction. These interactions are being done on the server side so cypress isn't properly intercepting them. Have you run into this situation?