r/javascript • u/allium-dev • 6d ago

Browser Test: A browser-based automated javascript testing framework in one .html file

https://github.com/swans-one/browser-test

Hi r/javascript! I want to share a small javascript testing project I wrote.

When I write small javascript projects that use browser APIs (most recently working with IndexedDB) I often choose not to write tests because it's a pain to either mock those interfaces server-side, and it's also a pain to setup a browser automation tool.

To solve this, I wrote up a super concise testing framework (~140 lines of JS) inside a html file that can just be dropped into a project and act as a simple test framework.

This obviously doesn't work in all situations. A big drawback is that there's no reasonable way to connect it to a CI pipeline. However for small projects, and during development, I've found it really fun and fast to use.

I'm very interested to hear what you think, or if you have other ways you've approached this situation in the past.

15 Upvotes

82% Upvoted

8 comments sorted by

View all comments

2

u/Specialist_Sun_1690 3d ago

This is pretty close to something I've been experimenting with as well. I also found that having the tests run directly in the browser during development makes small frontend projects much nicer to test.

In my case I went a bit further with the idea: unit/integration tests with Testing Library, request mocking, and a CLI for running the same tests headlessly in CI.

I actually have a small vanilla JS example with no bundler/build step if you're interested: https://github.com/BRIKEV/twd-vanillajs

It's all based on this tool https://twd.dev/

https://reddit.com/link/p7176k2/video/bbxzrz13brmh1/player

1

u/allium-dev 2d ago

Interesting, thanks for sharing!

To compare the approaches: we shared the goal of tests running in the browser, but my while my library aims for being very self contained with <150 lines of JS, your library aims for more features including CI.

So for you was the main attraction of this approach that you have access to the browser dev tools as you're running tests? Or was the goal more that you enable user interaction and visual feedback during the tests?

Maybe this question is a little wrongheaded / out there, but is there any overlap between your tool and a component management tool like storybook/patternlab?