A target for Cypress

[7tupel]

Hi everyone,

I recently started using shadow-cljs in favor to other options to compile my cljs projects. One reason was to be able to use storybook for (react) components. Another thing I would like to do is use cypress for e2e and component testing.

Now this might seem not an issue for shadow-cljs but please let me explain my rationale here:

Cypress is a JS testing framework for e2e and recently also component tests. Right now the only way I found how to use cypress with Clojurescript (and shadow-cljs) is the cypress-clojurescript-preprocessor. What this does is basically generate a new build configuration for each test and compile clojurescript into JS bundles. For each test file a new js bundle gets generated which is then loadable by cypress.

This approach is okeh-ish but might get problematic when there will be many hundreds(?) of tests files. And its not very elegant.

A more elegant way I believe would be to have a build target in shadow-cljs that will analyze the Clojurescript modules following a :ns-expression like i.e. "-test$", generate a JS test file for each module that can then be imported by cypress. This is exactly not how the current :browser-test target works which creates a single bundle with all tests (and other code).

This approach would be similar to how I currently compile the Clojurescript code into JS to be usable in storybook: here I simply use the :node-module target which will then not generate a bundle but independent JS files for each module. Using this target does unfortunately not work with cypress for reasons not 100% clear to me.

I would like to use this post to get feedback if anyone else has tried something like this and if this could be an interesting thing for other developers who would like to use shadow-cljs with cypress.

P.S. Here is a discussion about the rationale in the preprocessor linked above.

[thheller]

First of: Target implementations do not need to be part of shadow-cljs. They can be developed as a library or bundled with shadow-cljs. I'm happy to help out regardless.

However, I just don't have the slightest clue what cypress does or requires. Generating some extra files is trivial, generating a full new build definitely seems like overkill.

Is there some documentation that explains how cypress builds and runs the code? is it node? does it run webpack or similar? Does it need code organized in specific ways, apart from the cypress/integration dir?

[thheller]

Please stop worrying about issues with cljs_env. I can fix those very easily. I just need to understand what is actually needed and if a custom :target would make things actually easier or if the existing ones would cover it fine.

process not being available is webpack complaining. Not node. The e2e tests run in an iframe in the Browser. It could be fixed with some extra webpack config but I can also just get rid of the reference completely.

I'll look into the component tests a little more. Never tried those once yet.

[thheller]

You can try shadow-cljs version 2.19.6 and setting :runtime :browser in the :npm-module build config. That'll no longer reference process and seems to just work.

I still think the entire setup is a little less than ideal given that webpack technically isn't needed. However, given that you can only pick officially supported bundlers/frameworks for this whole thing there isn't much of a choice.

[7tupel]

Thanks for the change but it doesn't seem to work or I'm doing something wrong. Just to be sure I didn't misunderstood you: I changed the build configuration for cypress like

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

Apart from that I did the following steps:

• Remove node_modules directory and yarn.lock file
• change the version of the shadow-cljs dependency to 2.19.6
• freshly install the node dependencies with yarn
• clean the build folder where the compiled JS code will be put
• start a new build
• run cypress

The generated JS code still uses the process variable.

[thheller]

You didn't actually bump shadow-cljs. You are using deps.edn so you need to update it there. You also don't need to remove the node_modules folder or the .lock file. Actually you are supposed to keep that.

[7tupel]

well, just like I said, it might be a stupid mistake at my end ^^

Thanks a lot, it seems to work so far. I'll try around a bit.