enzo
Small testing library for marko that allows you to test components using any testing framework.
Installation
npm install --dev enzo // or
Usage
This module exposes two methods for rendering components: render
and mount
.
render(componentPath: string [, input: object])
The render
function will perform a simple static
render of the component. The first argument is the path to the component
template and the second argument (optional) argument is the
input for rendering the component.
ex.
const render = const componentPath = require const input = text: 'some-text' const markup = console // prints out the component markup
mount(componentPath: string, [, input: object])
The mount
function will render the component within
a jsdom instance.
The input arguments are the same as the arguments for render
.
Note: this is an async
function.
This will resolve with an object containing:
dom
- thejsdom
instancewindow
- thejsdom
instance's windowdocument
- thejsdom
instance's documentcomponent
- the rendered component instanceclean
- a helper function for destroying thejsdom
instance.
Note: Calling component.destroy()
will automatically
trigger the clean
function and perform cleanup.
const mount = const componentPath = require const input = text: 'some-text' const component = await component
enzo
?
Why I wanted a tool that was similar to what
enzyme provides for
react.
However, I didn't want everything that enzyme
provided.
Perhaps in the future, even more opinionated developers can build wrappers
around enzo
to give it more functionality.
I also wanted a tool that allowed developers a little more flexibility
when testing marko
components. At the moment, the preferred
way of performing component tests is with
marko-cli, which
is a fantastic tool, but locks users into using the
mocha testing framework
and lasso.
enzo
is simply an alternative choice.
Fun fact: The name enzo
comes from squishing the names
enzyme
and marko
together. No, I didn't name it after
the Ferrari.
enzo
works
How enzo
provides a few helper methods for testing your marko
components.
The render
function is essentially a slightly more
concise way of loading the component and calling renderToString
.
It provides little value over what is already available, but can save
you a few keystrokes. The output string alone can be pretty useless by
itself, but when paired with other tools as
cheerio
you can make more powerful assertions.
The mount
function does quite a bit more work. It takes
your marko
component and bundles all of the necessary modules
together to run it in a browser environment using
webpack. The resulting
bundle is then passed to a jsdom
instance and rendered.
Each call to mount
returns a new component that has been
sandboxed in it's own jsdom
instance, so you won't have to
worry about messy conflicts when running tests in parallel.
This also means that the jsdom
document
object is
not stuffed into the Node globals
(see this wiki page).
webpack
and not <insert bundler here>
?
Why Some sort of bundler was needed to pull dependencies together,
and I wasn't going to write that logic myself. I went with
webpack
, which is arguably one of the most flexible and well
supported bundlers out there. Although this makes enzo
way more appealing to webpack
users, most users should
still be able to write effective unit tests for their
components regardless of the bundler they use as long as
the more complex bundler specific features are not used.
Testing with the bundler you use in production is still better though,
and not being able to use bundler specific features is
a limitation that I am not happy with.
Perhaps this module can be extended to allow for
custom bundlers to be used in the future (PRs welcome!).
Example usage
I created a small example
project that shows how components can be tested using
enzo
, cheerio
, and ava.
It's relatively small in scope, but enough to show off how tests
can be written with enzo
.
Todo
Allow for custom rules to be added to theAllow for custom bundlers to be used.webpack
config.