The words Under construction in black text on a yellow background with diagonal black stipes surrounding it
I'm in the process of moving my site. It's still a work in progress. Please excuse the mess and broken links.

Testing Vanilla JavaScript ES Modules With Deno

TODO: Pull subtitle into page object

## TL;DR

I setup [[https://deno.land/][Deno]] to test ES modules written in vanilla JavaScript. I tried Jest and Vitest first. They didn't work.

Sample code demonstrating the methodology in The Code section below.

## Overview

I'm learning Rust with [[https://doc.rust-lang.org/book/][The Rust Book]], [[https://doc.rust-lang.org/rust-by-example/][Rust By Example]] and [[https://www.rustadventure.dev/][Rust Adventure]]. Doing write-ups of what I'm learning is part of my process. I'm going full bore with that by making [[https://typing-rust.alanwsmith.com/][an entire site]] dedicated to Rust.

The site is built with [[https://rust-lang.github.io/mdBook/][mdbook]] (which is amazing) and some vanilla JavaScript written in ES Modules. Figuring out how to test the modules was a pain. I spent a hours trying to get Jest and Vitest to work. Using them without turning everything into a npm project was beyond me.

I'm not opposed to npm projects, but having to set one up solely for testing felt gross. [[https://www.youtube.com/@chrisbiscardi][Chris Biscardi]] (who runs [[https://www.rustadventure.dev/][Rust Adventure]]) turned me on to [[https://deno.land/][Deno]]. It has a [[https://deno.land/manual@v1.29.4/basics/testing][built-in testing]] feature that does exactly what I need.

Once you have Deno [[https://deno.land/manual@v1.29.4/getting_started/installation][installed]], the test process is delightfully straight forward. Two files are all you need: The one you're testing and the one you're testing with.

## The Code

Here's the test file followed by the file to test:

#### example_test.js

code_start_default_section code_end_default_section

Given how much time I spent with the other tools it was super nice to have Deno actually just work out of the box.

## Outro

I was surprised how hard it was to figure this out. Especially since the solution didn't come from searching the web. It came from a direct recommendation.

My search-fu may have been off, but it's hard not to feel like I'm alone out here when I want to do things without npm. The Deno solution proves that's not the case. But, it does make me wonder: How many folks aren't using more vanilla approaches simply because of the lack of information?

## Bonus Points

Here's an HTML file that uses the .js file:

#+begin_export html

#+end_export

Debugging Stuff

I'm moving stuff around right now. All this below is helping me figure out where to put stuff

        -- title

Testing Vanilla JavaScript ES Modules With Deno

-- p

## TL;DR

-- p

I setup [[https://deno.land/][Deno]] to test ES modules written in
vanilla JavaScript. I tried Jest and Vitest first.
They didn't work.

-- p

Sample code demonstrating the methodology in The Code
section below.

-- p

## Overview

-- p

I'm learning Rust with [[https://doc.rust-lang.org/book/][The Rust Book]], [[https://doc.rust-lang.org/rust-by-example/][Rust By Example]] and
[[https://www.rustadventure.dev/][Rust Adventure]]. Doing write-ups of what I'm learning
is part of my process. I'm going full bore with that
by making [[https://typing-rust.alanwsmith.com/][an entire site]] dedicated to Rust.

-- p

The site is built with [[https://rust-lang.github.io/mdBook/][mdbook]] (which is amazing) and some 
vanilla JavaScript written in ES Modules. Figuring out
how to test the modules was a pain. I spent a hours trying
to get Jest and Vitest to work. Using them without turning
everything into a npm project was beyond me.

-- p

I'm not opposed to npm projects, but having
to set one up solely for testing felt gross. [[https://www.youtube.com/@chrisbiscardi][Chris Biscardi]]
(who runs [[https://www.rustadventure.dev/][Rust Adventure]]) turned me on to [[https://deno.land/][Deno]]. It
has a [[https://deno.land/manual@v1.29.4/basics/testing][built-in testing]] feature that does exactly what I
need.

-- p

Once you have Deno [[https://deno.land/manual@v1.29.4/getting_started/installation][installed]], the test process is
delightfully straight forward. Two files are
all you need: The one you're testing and the
one you're testing with.

-- p

## The Code

-- p

Here's the test file followed by the file 
to test:

-- p

#### example_test.js

-- code/
-- js

import { assertEquals } from 'https://deno.land/std@0.173.0/testing/asserts.ts'
import { example } from './example.js'

Deno.test('example test', () => {
  assertEquals(example(), true)
})

-- /code

-- p

#### example.js

-- code/
-- js

export const example = () => {
  return true
}

-- /code

-- p

That's it. As long as the test file ends with
`_test.js` you're good to go.

-- p

### Running The Tests

-- p

Testing is done by running this command 
in the same directory as the files:

-- code/
-- shell

deno test

-- /code

-- p

The output will look like this:

-- code/
-- shell

running 1 test from ./example_test.js
example test ... ok (6ms)

ok | 1 passed | 0 failed (19ms)

-- /code

-- p

Given how much time I spent with the other tools
it was super nice to have Deno actually just work
out of the box.

-- p

## Outro

-- p

I was surprised how hard it was to figure this
out. Especially since the solution didn't come from
searching the web. It came from a direct recommendation.

-- p

My search-fu may have been off, but it's
hard not to feel like I'm alone out here when
I want to do things without npm. The Deno solution
proves that's not the case. But, it does make me wonder:
How many folks aren't using more vanilla approaches simply
because of the lack of information?

-- p

## Bonus Points

-- p

Here's an HTML file that uses the .js file:

-- p

#+begin_export html

-- p

<!DOCTYPE html>
<html>
  <head>
    <script type="module">
      import { alfa } from './example.js'
      console.log(alfa())
    </script>
  </head>
  <body></body>
</html>

-- p

#+end_export


-- categories
-- JavaScript 
-- Testing 
-- Deno 
-- HTML 
-- Web Development

-- metadata
-- date: 2023-01-24 15:25:23
-- id: 2kmu8vq9
-- status: published 
-- type: post
-- SCRUBBED_NEO: false
-- site: aws