lim•9mo ago

Component testing with Deno

I've run through a zillion possible setups with Deno and I'm still struggling to understand exactly how to do this. I want to write Typescript that transpiles to vanilla web components and I want to run associated unit tests in a component.test.ts that sits beside my component in a folder. I want these unit tests to be able to spin up a dom to test things like saving to localStorage. And I want this to be as simple and minimal as possible. I've explored just writing everything from scratch with Deno, and I couldn't quite grasp how to get esbuild to output my components as separate modules and it looked like I'd have to basically write my own build scripts, like the pre-Gulp days. I have installed vite and tried out vite vanilla, vite-lit, and vite-svelte. I thought vite-svelte was my saviour but again I just couldn't get the testing working. When I tried to install vitest I kept hitting this error: Error: Vitest was initialised with native Node instead of Vite Node and could progress no further. Does anyone know of a tutorial or starter kit that has testing set up properly? That isn't hugely elaborate or very outdated?

4 Replies

Deno AI Helper•9mo ago

I understand your struggle with setting up a testing environment for your web components with Deno. However, based on the documentation, there isn't a specific guide or tutorial that directly addresses your scenario of testing web components with Deno. The documentation does provide a general guide on how to write tests in Deno. For instance, you can use the Deno.test() function to define your tests and then run them using the deno test command. Here's a basic example from the documentation:

// mod_test.ts
import { assertEquals } from "https://deno.land/std@0.192.0/testing/asserts.ts";
import { is42 } from "./mod.ts";

Deno.test("42 should return true", () => {
  assertEquals(true, is42(42));
});

Deno.test("1 should return false", () => {
  assertEquals(false, is42(1));
});

// mod_test.ts
import { assertEquals } from "https://deno.land/std@0.192.0/testing/asserts.ts";
import { is42 } from "./mod.ts";

Deno.test("42 should return true", () => {
  assertEquals(true, is42(42));
});

Deno.test("1 should return false", () => {
  assertEquals(false, is42(1));
});

You can run the tests with deno test. However, this doesn't cover the specifics of testing web components or using a DOM environment for testing. For more complex scenarios like yours, you might need to look into third-party libraries or tools that can provide a DOM-like environment for testing in Deno. However, the documentation does not provide specific recommendations or examples for this. I'm sorry I couldn't provide a more direct solution to your problem. It might be helpful to ask this question in Deno's community forums or on Stack Overflow, where other developers might have faced similar challenges. 🦕

Helpful Links: How to publish Deno modules to NPM How to publish Deno modules to NPM dnt — the easiest way to publish a hybrid npm module for ESM and CommonJS Deno 1.25 Release Notes

lim•9mo ago

I have asked ChatGPT already, of course. And read the docs! I'm asking a specific question

cdoremus•9mo ago

Take a look at my recent blog post: https://deno-blog.com/Testing_Fresh_Components,_Middleware_and_Handlers_with_fresh-testing-library.2023-10-15

Craig's Deno Diary

Craig's Deno Diary is a blog that covers the JavaScript and TypeScript runtime Deno and focuses on how to write Deno programs and use Deno libraries.

lim•9mo ago

Thanks. I really appreciate you taking the time to respond! <3 The thing is I'm really not looking to use Fresh. I need to write web components. If I had my druthers I'd just write plain web components but I am required to use Typescript, so this led me to Svelte as this will export to wc. I couldn't get esbuild to build me individual modules in deno. I don't know why I swallowed the fly. I've gone back to Node :/