Allow using `jsdom` with a local `window` on node for tests

[cjhowedev]

I have been thinking about how we could write simple tests without needing a full-stack testing solution up front. I think we can already test most of our choo applications with tools like assert-html, but it would be nice to have a way to test DOM events. jsdom seems like a perfect fit for this use case, but I'm not sure how I'd actually go about using it with choo. For one, app.mount expects a global window object, but I want to pass in local window objects to allow running tests in parallel. I think it'd be nice if we had some middle ground in between app.mount and app.toString that allowed using a DOM implementation like jsdom to render the application, but also allowed setting up an initial state and route like app.toString.

[graforlock]

You can use jest, it works flawlessly with choo, maybe look for their jsdom implementation in their test runner

[cjhowedev]

Hmm, I wasn't aware jest had jsdom support. I'll give it a try.

[graforlock]

I does have the whole shebang both node and clientside-wise, also coverage etc

[cjhowedev]

I tried testing using Jest and JSDom, and it works really well! To be honest, this just makes me crave a more lightweight solution even more, though. I think the Jest jsdom environment could be a great starting point!

[graforlock]

yup jest is a phenomenal implementation and really shines/stands out from the rest these days. one of these "run it and forget about it" options.

feel free to try implementing it lightweight, but isn't this just reinventing the wheel ?

[cjhowedev]

Well, it may be. However, I ultimately would want something we could include with create-choo-app (or another create-choo- variant), which should probably be pretty lightweight to avoid putting too many heavyweight dependencies on new users.

[timmak]

https://github.com/developit/undom might be an option depending on needs

[graforlock]

that looks cool, i will have a look, and we can incorporate something nice @cjhowe7 if you want to

i mean anything is good enough that doesn't require to run terrible chrome/chromium/electron/younameit browser session in a test runner.

[yoshuawuyts]

From experience anything that isn't a real browser will lead to issues – speaking from years of trying out all different variations. tape-run seems the current best solution, but having a headless Chrome / FireFox TAP runner a la smokestack would be dope.

Also really dig the interactive feel of Jest – the way it allows filtering tests is nicely done, and useful for building applications. Kinda wish it was a lil more modular tho.

On Fri, Oct 6, 2017 at 3:33 PM Maciej Sitko notifications@github.com wrote:

that looks cool, i will have a look, and we can incorporate that @cjhowe7 https://github.com/cjhowe7

i mean anything is good enough that doesn't require to run terrible chrome/chromium/electron session in a test runner.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/choojs/choo/issues/577#issuecomment-334849620, or mute the thread https://github.com/notifications/unsubscribe-auth/ACWlegwGRCWqJfXXsBd_WkSc6-9VkKU2ks5spoCBgaJpZM4PwGb7 .

[graforlock]

yeah they made it a close box full-stack option which is a shame, although you can import their modules one by one and make something out of it - its still its a bit of an end-all solution for their convenience sake.

from my experience, since my company switched to jest exclusively - it has proven to be rock-solid and idiot-proof low entry solution for all things JS, much better to browser based alternatives such as Karma. allows absolute no distinction between node and client-side (massive advantage). full testing isomorphism. just press & play. but hey fb team has capacity to invest in it so its decent. making something on a similar level is difficult, to say the least.

[chinedufn]

I wanted to be able to simulate clicks / other events in my tests without needing to spin up a browser environment, so for me the trade-off of not really being in a browser is worth it at this time.

So.... I hacked around a bit and came to a solution just now that's gross but super simple.. Hopefully over time I stumble into something nicer... but I thought I'd share where I'm at now in case it helps!:

https://github.com/chinedufn/choo-test-onclick-example/blob/master/test.js

tl;dr I'm making global.window and global.document in Node.js use JSDOM so that choo works as if it was in a browser.

Again - hacky so YMMV I'd imagine..