README
snabbdom-testing-library
A tiny tool to test Snabbdom virtual DOM nodes using dom-testing-library.
npm i snabbdom-testing-library --save-dev
The Snippet
// The Snabbdom helper function *h* that creates VDOM nodes
// and the *patch* function that applies VDOM nodes to a container.
// The Snabbdom documentation shows how to configure these two functions.
import {h, patch} from './my-snabbdom-configuration';
// Only the *makeRender* is a *snabbdom-testing-library* specific function.
// It creates a *render* function that renders VDOM nodes.
// It's stateful and works exactly like a real Snabbdom client code, that is
// the first call applies the given VDOM node to a new DIV element,
// while the succeeding calls apply VDOM nodes to the previous VDOM nodes.
// The rest of the exported functions are functions from *dom-testing-library*.
import {makeRender, fireEvent, queryByText} from 'snabbdom-testing-library';
// In this example we are using Sinon test doubles to test event handlers.
import sinon from 'sinon';
// The test *render* function is created based on our own configuration
// of the *patch* function. That way we may use any modules we want.
const render = makeRender({patch});
// Test doubles of event handlers.
const btn1OnClick = sinon.fake();
const btn2OnClick = sinon.fake();
// A div with two buttons.
const vnode = h('div', [
h('button', {
on: {click: btn1OnClick}
}, '1st'),
h('button', {
on: {click: btn2OnClick}
}, '2nd'),
]);
// *container* is the DOM element where the given VDOM node is rendered.
// *getByText* is the *dom-testing-library* query function scoped to the *container*,
// so that we don't need to pass it the *container* every single time.
const {getByText, container} = render(vnode);
// This will get the first button within the *container*.
// Please notice this *getByText* function comes from the *render* function call.
const btn1 = getByText('1st');
// This will get the second button within the *container*.
// Plese notice this *queryByText* function
// is imported from *snabbdom-testing-library*
// and is not scoped to the *container*.
const btn2 = queryByText(container, /2/);
// None of the buttons has been clicked.
expect(btn1OnClick.called).toBeFalsy();
expect(btn2OnClick.called).toBeFalsy();
// A simulated click.
fireEvent.click(btn1);
// Just the first button has been clicked.
expect(btn1OnClick.calledOnce).toBeTruthy();
expect(btn2OnClick.called).toBeFalsy();
// Another simulated click.
fireEvent.click(btn2);
// Both of the buttons have already been clicked.
expect(btn1OnClick.calledOnce).toBeTruthy();
expect(btn2OnClick.calledOnce).toBeTruthy();
More about testing
Because this library is nothing but a tiny wrapper around dom-testing-library, please refer to its documentation.
Valuable resources may also be found in the README of the react-testing-library library.
Running without Jest
You may need jsdom-global.