Fork me on GitHub
#react
<
2023-02-04
>
Lucy Wang09:02:34

Have anyone used cypress for component testing a cljs (reagent/helix/uix etc.) frontend project? This article is an interesting read https://www.cypress.io/blog/2022/08/25/how-component-testing-changed-our-workflow-and-how-i-came-to-work-at-cypress/

Roman Liutikov14:02:59

At Pitch we use Cypress for e2e testing and Jest for component testing. Jest testing is much faster than e2e in Cypress, I’m not sure about component testing though. We’ll be open sourcing our cljs wrapper for Jest, soonish

lilactown22:02:39

we do the same as roman w.r.t. cypress. we only use it for e2e testing. We use react-testing-library combined with cljs.test for component testing

martinklepsch17:02:05

We’ve migrated from Cypress to Playwright because it allowed us to e2e test the interaction between multiple browsers/ clients. If this sounds like something you might want to do I suggest checking out Playwright.

lilactown16:02:32

@U0FR82FU1 I'm curious why you went with jest?

Roman Liutikov16:02:54

@U4YGF4NGM I think the main motivation was CI time, we had Cypress as the only tool for UI testing and ended up with a couple hundreds of e2e tests which slowed down PRs merging process

lilactown16:02:33

I guess why not cljs.test

lilactown16:02:42

but maybe I'm misunderstanding

lilactown16:02:06

I have a lot of gripes with using cljs.test and RTL so I'm curious if jest for component tests is significantly better

Roman Liutikov16:02:37

dunno, I wasn't involved in the decision, we do use Jest with RTL

Roman Liutikov16:02:29

ok, I've dug a bit of info, the motivation was basically the same as for UIx look and feel — social factor, as in most of front-end folks at Pitch are coming from JS background

lilactown17:02:15

yup makes sense

Shuai Lin13:02:02

I have a project that uses exactly this approach (CT with cypress) and completely echos most of the advantages mentioned in this article. The component testing feature of cypress is pretty handy nowadays. I like it because: 1. Test component in a real & headful browser is more intuitive than virtual dom. 2. Uses the same set of DSL (`cy.get, cy.contains, cy.click` etc.) in e2e and component testing, and forget about all other DSLs 3. Fast hot-reload time (could get slower for more complex projects, but still not that slow). Under the hood Cypress uses webpack dev server for this, which picks up the output of shadow-cljs's :npm-module target.

Shuai Lin13:02:29

Recently I've hacked cypress itself a bit to use shadow-cljs's own hot reload, and the reload is even faster (for complex tests it goes down from 5s10s to 23s)