Riot Component Unit Test with Vitest (Node env)

This article covers testing Riot Input components using Vitest and Riot/SSR in a Node environment.

A second method exists: Vitest into a JsDom environment (or HappyDom); read this article to learn more

Before going forward, ensure you have a base Riot+Vite project and have created at least one component. If not, you can read my previous article on creating an Input Component.

These articles form a series focusing on RiotJS paired with BeerCSS, designed to guide you through creating components and mastering best practices for building production-ready applications. I assume you have a foundational understanding of Riot; however, feel free to refer to the documentation if needed: https://riot.js.org/documentation/

Riot + Vitest + Riot-SSR: Next Generation Testing Framework

Vite is used as a development server to provide real-time rendering of my Riot application. Using Vitest for testing offers many advantages:

• A test runner that uses the same configuration as Vite (vite.config.js).
• It provides a compatible Jest API (one of the most used test runners)
• Performances: it uses Worker threads to run as much as possible in parallel.
• Easy setup and configuration (almost none).

Add Vitest to your Riot project:

npm install -D vitest

To execute the test, add the following section to your package.json:

{
  "scripts": {
    "test": "vitest"
  }
}

And that's it for Vitest! If you need a specific configuration, add test property in your Vite config vite.config.js. Configuration documentation: https://vitest.dev/config/

Write a first Test with Riot-SSR

Our tests will use Riot SSR (Riot Server-Side Rendering) because it is a module that renders riot components on the server.

First, add Riot-SSR to your project:

npm i -D @riotjs/ssr

The module takes a component and renders it as HTML; we must assert if we don't get the expected result.

As the HTML rendering is only a String, so we can't test Component events, such as value changes, button clicks, key types, etc. A Browser Dom environment, such as JsDom, is required to test Riot Component reactivity.

Here is the minimum test we can create with Vitest and Riot-SSR:

import { assert, describe, it } from 'vitest'
import render from '@riotjs/ssr'

import cInput from '../components/c-input.riot'

describe('Component c-input', () => {
    it('should render the input without props', () => {
        const html = render('c-input', cInput, {})

        assert.strictEqual(html, '<c-input><div class="field border"><input value="" type="text"></div></c-input>')
    })
});

Code Breakdown:

1. Modules and the component are loaded.
2. Vitest provides common utilities for testing, similar to Mocha and Jest:
   • describe() is used to define a group of tests
   • it() for defining a test
   • assert() for validating tests
3. The render() function takes 3 arguments:
   • First: The component name built as String
   • Second: The component module
   • Third: Optional props are properties passed to the components.
4. Validate the result of the rendered HTML as String with the assert.strictEqual(result, expected).

Now start the test through the NPM command:

npm run test

We get the following result:

 DEV  v1.4.0 /riot-beercss

 ✓ tests/c-input.test.js (1)
   ✓ Component c-input (1)
     ✓ should load a basic input without props

 Test Files  1 passed (1)
      Tests  1 passed (1)
   Start at  13:41:34
   Duration  242ms (transform 108ms, setup 0ms, collect 128ms, tests 6ms, environment 0ms, prepare 35ms)

✅ The test succeeds; everything is good. Vitest is listening to changes, and it will print the result when a new test is created.

Advanced Tests

The goal now is to try all input states by passing props to the components, render it with Riot-SSR, and it should render the expected result.

Let's try testing a default value for the input:

    it('should render the input with a default value', () => {
        const _htmlExpected = '<c-input><div class="field border"><input value="Firstname" type="text"></div></c-input>';
        const _html = render('c-input', cInput, { value: "Firstname"})

        assert.strictEqual(_html, _htmlExpected)
    })

Code Details:

1. First the expected HTML result is stored into a constant
2. The Component is built with a props value: "Firstname"
3. The result is validated with the assert expression. In this case, everything is fine.

Now we can replicate this testing method for all props and multiple props combined: Let's create a rounded small input with a "Password" type, label, and an error.

it('should render multiple props: label, type, error and round', () => {
    const _htmlExpected = '<c-input><div class="field border round invalid label"><input value="" type="password"><label>Password</label><span class="error">The password is too show, minimum 20 characters.</span></div></c-input>';
    const _html = render('c-input', cInput, { label: "Password", type: "password", error: "The password is too show, minimum 20 characters.", round: true})

    assert.strictEqual(_html, _htmlExpected)
})

Code Breakdown:

• Multiple props are passed to the render() function
• A constant is created with the expected HTML result based on the component's logic.

The test pass ✅

Find all input tests the following GitHub repository:
https://github.com/steevepay/riot-beercss/blob/main/tests/c-input.node.test.js

Conclusion

Combining Riot-SSR with Vitest is a good method for quickly testing the rendering of Riot Components, but it does not provide a Browser for testing HTML events.

I covered another testing method in a JsDom environment, to compare the two solutions:

• For extensive but verbose Riot testing: use a JsDom environment
• For fast, no-brain but limited Riot testing: use a Node Server Environment with Riot-SSR

Feel free to comment if you have questions or need help about RiotJS.

Have a great day! Cheers 🍻