Discussion: cypress with shadow-cljs w/o preprocessor

[7tupel]

Hi everyone,

a few weeks back I started to play with Clojurescript, Rum (React Wrapper), Storybook and Cypress. I stumbled upon this great project and especially the Rationale Discussion in the issues.

I took this as an inspiration and tried to get cypress working without the need of generating a shadow-cljs build configuration for each module that describes a cypress test. After some experimentation and a discussion with Thomas Heller - the creator of shadow-cljs - and a fix resolving an issue with webpack 5 that he pushed today I was finally able to get at least component tests with cypress working without any extra preprocessing using a single build configuration. The e2e test should also work but I haven't had time to actually try those.

I'll post a more detailed description once I get the time to write one but here are the cliff notes:

Dependencies:

• shadow-cljs 2.19.6 (node dependency and Clojure dependency)
• react 18.2.0
• cypress 10.3.0
• webpack 5.73.0
• "cypress/react 6.0.0
• @cypress/webpack-dev-server 2.0.0
• rum 0.12.9 (Clojurescript)

I added the following build target to my shadow-cljs.edn configuration:

{...
:builds {
:cy-component {:target          :npm-module
               :runtime         :browser
               :ns-regexp       "-cypress$"
               :output-dir      "resources/cy-component/compiled"}}
...}

With an example cypress component test

(ns pwa.components.avatar-cypress
  ""
  (:require-macros [latte.core :refer [describe it]])
  (:require
   ["@cypress/react" :refer [mount]]
   [pwa.components.avatar :refer [Avatar]]))

(def cy
  ""
  js/cy)

(describe "Trying to actually test a rum component."
  (it "Mount a component." []
    (mount (Avatar {:variant :round :size :small :alt "Cypress" :placeholder "C"}))
    (as-> cy cy'
      (.get cy' "[data-cy=\"placeholder-text\"]")
      (.contains cy' "C"))))

cypress.config.js:

const { defineConfig } = require("cypress");

module.exports = defineConfig({

  component: {
    supportFile: "cypress/support/components.js",
    specPattern: "resources/cy-component/compiled/**/*_cypress.js",
    devServer: {
      framework: "react",
      bundler: "webpack",
    },
  },
});

cypres/plugins/index.js:

const injectDevServer = require("@cypress/react/plugins/react-scripts")

module.exports = (on, config) => {
  injectDevServer(on, config)
  return config
}

Works like a charm thanks to the help of Thomas :)

Maybe this can be of help to any of you.

[viesti]

Oh wau, great to see this effort! I was probably too much in the shadows myself (pun maybe :)) and kind of lost track (or went to hammocking and didn't get back :). It is really neat to see that this project served as an inspiration, thank you! :)