mithril-testing-library

$3

This library provides some helper functions around @testing-library/dom for testing mithril components.

$3

``
npm install --dev mithril-testing-library
`

or using yarn

`
yarn add --dev mithril-testing-library
`

This library has peerDependencies for mithril.

$3

This library takes a lot of code from react-testing-library. The main difference is the way the render function is called.

In mithril-testing-library, the render function is called with the mithril Component and the attributes you want to pass the component as arguments. react-testing-library on the other hand works by sending the react element directly to the render function.

That won't work in mithril since if we create mithril element outside of mithril
tree construction, the event callbacks for those elements won't trigger an
automatic redraw in mithril. The reference check for vnode returned by that
element created outside mithril tree would always return the same object.

Here's more information on the mithril documentation site

https://mithril.js.org/components.html#avoid-creating-component-instances-outside-views

$3


`
async function wait(waitTime) {
return new Promise((res) => setTimeout(res, waitTime));
}

const ComponentToTest = {
view: (vnode) => {
return m("div", [
m(
"button",
{
onclick: (e) => {
e.stopPropagation();
vnode.state.showList = !vnode.state.showList;
},
},
"Open list"
),
vnode.state.showList &&
m(
OnClickOutside,
{
onDocumentClick: () => {
vnode.state.showList = false;
// since this click handler is outside mithril ecosystem, we
// have to force redraw
m.redraw();
},
},
m("ul", { "data-testid": "the-list" }, [(m("li", 1), m("li", 2))])
),
]);
},
};

test("onclickoutside to close dropdown menu", async () => {
const { getByText, queryByTestId } = render(ComponentToTest);
expect(queryByTestId("the-list")).toBeNull();
fireEvent.click(getByText("Open list"));

await waitFor(() => {
expect(queryByTestId("the-list")).not.toBeNull();
});

await wait(1);
fireEvent.click(document);

await waitFor(() => {
expect(queryByTestId("the-list")).toBeNull();
});
});
``