Marko Testing Library re-exports everything from
DOM Testing Library as well
as these methods:
Render into a container which is appended to
The cleanup function should be called between tests to remove the created DOM nodes and keep the tests isolated.
You won't often need to specify options, but if you ever do, here are the
available options which you could provide as the third argument to
By default for client side tests,
Marko Testing Library will create a
and append that
div to the
document.body and this is where your component
will be rendered. If you provide your own HTMLElement
container via this
option, it will not be appended to the
For example: If you are unit testing a
tablebody element, it cannot be a child
div. In this case, you can specify a
table as the render
render method returns a promise which resolves with an object that has a
The most important feature of
render is that the queries from
DOM Testing Library are automatically
returned with their first argument bound to the results of rendering your
See Queries for a complete list.
This method is a shortcut for logging the
prettyDOM for all children inside of
This is a simple wrapper around
prettyDOM which is also exposed and comes from
DOM Testing Library.
A Marko components
input can change at any time from a parent component.
Although often this input is passed through your component declaratively,
sometimes it is necessary to ensure that your components reacts appropriately to
new data. You can simulate your component receiving new
input by passing new
data to the
Marko components also communicate with their parents through events. It is recommended to also test that your components emit the right events at the right time.
emitted helper does just that. Calling the helper will return all emitted
events since the last call to the helper. You can also pass in an event type to
filter the results.
The containing DOM node of your rendered Marko Component. For server side tests
this is a JSDOM.fragment, and for
client side tests this will be whatever is passed as the
Tip: To get the root element of your rendered element, use
🚨 If you find yourself using
containerto query for rendered elements then you should reconsider! The other queries are designed to be more resilient to changes that will be made to the component you're testing. Avoid using
containerto query for elements!
With client side tests your components are rendered into a placeholder
HTMLElement. To ensure that your components are properly removed, and destroyed,
you can call
cleanup at any time which will remove any attached components.
To save some typing, you could also import a file with the above.
If you are using Jest, you can simply include the following to your Jest config to avoid doing this in each file.