One of the main limitations to building a fullstack Deno web app today (2022-12) is component testing. It is not possible to use standard tooling from the broader JS ecosystem without work arounds that effect the developer experience.
This repo shows how to work around these limitations today and integrate modern test tooling into Deno. Most of the action can be found in this test and this module. The tools and work arounds used are:
I was able to get around the following error:
error: TypeError: For queries bound to document.body a global document has to be available... Learn more: https://testing-library.com/s/screen-global-error
By importing JSDOM and setting up the document global in an external module. This must be done due to instantiation order.
The Deno docs suggest 3 different DOM parsers. I was unable to get either
LinkeDOM or
deno-dom to work.
However JSDOM is working with some hacks. The
configuration file must be setup as listed
here
and the globals window.document and window.HTMLIFrameElement must be set to
values from JSDOM.
JSDOM also relies on the isContext function which is not available in the Deno
environment. This has been overriden using an import map to always return false.
The jest-dom matchers can be made to work with the expect
package by injecting them with the addMatchers function. To make expect
function globally accessible it is added to the Window. The expect package
also needs to be augmented with the jest-dom matcher types.
Tests must be run using the following command:
deno test --allow-env
- When tests fail output is not very useful
- Tests must be run with
--allow-envflag