How to test an htmx application?

[guettli]

There is a question on Stackoverflow about how to test htmx based applications.

I think there should be a small section about this in the docs.

[BoPeng]

That is framework dependent, for Django/Python, I use django-htmx to process htmx request to be processed by Django, and I do something like the following to create a fake request with HTMX header for testing:

from django_htmx.middleware import HtmxDetails

def htmx_request(user=None,
                     get_url=None,
                     post_url=None,
                     post_data={},
                     trigger=None,
                     **kwargs):
    headers = dict(HTTP_HX_Request="true", HTTP_HX_Trigger_Name=trigger)
    if get_url is not None:
        request = RequestFactory().get(
            get_url, {x: y for x, y in kwargs.items() if y is not None}, **headers)
    if post_url is not None:
        kwargs.update(headers)
        request = RequestFactory().post(post_url, data=post_data, **kwargs)
    request.htmx = HtmxDetails(request)
    request.user = user if user else AnonymousUser()
    return request

[guettli]

Every professional framework has at least one chapter in his docs about how to write tests.

I think there are three ways:

• use the test tools of you backend framework to test your backend.
• e2e tests with Playwright (or similar tool)
• maybe some JS based testing which does not need a full browser. But I have not done this yet.

This is just a gentle reminder that a chapter in the docs would be useful.

[kensmith]

Seconded. I just came here to ask this. I had been thinking of using Selenium/Playwright/Puppeteer but had a discussion with someone recently where they had a bad experience with e2e due to fragile tests and just pushed all testing to the unit test level. This vibes with my intuition. My backend is in Go so it's likely possible to do something similar to what @BoPeng does in Python but how are people testing their HTMX applications in general?

[BoPeng]

The test we have done stayed at the request/view level with the synthetic htmx requests. We spent a huge amount of time on selenium-based tests but these tests were very slow and many of them would fail randomly despite our best efforts to robustify them. We eventually gave up on them because those failures blocked our code review/merge pipelines.

[Telroshan]

I personally use Playwright that was already mentioned above, but there's indeed no "offical" way to test htmx-based apps for now.

Btw see #2360 for a related discussion on race-conditions and how to make reliable htmx-based tests.

If someone feels like it, PRs improving documentation are always welcome!

[DevOpsCraftsman]

I end up with a strategy which is… a little bit weird, but which works.

But there is one important pre-condition:

The template engine syntax you’re using should have an homologue in the JS world.

On this specific project, which is in Kotlin / Spring Boot, we are using Pebble.

It’s a "jinja-like" SSR template, like the ones of Django (Python) and twig (in PHP / Symfony).

Happens there is a similar one for JS, which is called nunjucks
It can renders template in both the front-end and the backend (node env, and JSDOM env)

The trick is simply to have nunjucks render the pebble (or jinja, or twig...) templates in a JSDOM environnement, and let the JS run naturally, and run assertion like you would do with any other frontend.

That’s enough for tools like Alpine

For htmx - which fires AJAX requests, asking the server for html fragments to update the current DOM - you need an additionnal trick:

MSW

With it, you can intercept those request, and render the appropriate partial templates, with nunjucks

https://www.linkedin.com/posts/the-awareness-provider_you-should-re-architect-to-make-your-front-end-activity-7428457876949512193-UwjJ

[DevOpsCraftsman]

You will likely need a little adapter for differences in syntax