Marko Testing Library re-exports everything from
DOM Testing Library as well
as these methods:
Render into a container which is appended to
You won't often need to specify options, but if you ever do, here are the
available options which you can 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 component.
See Queries for a complete list.
Alternatively, you can use the
screen method to query into all
currently rendered components in the
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 react 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.
Like the top-level cleanup method, this allows you to remove and destroy the currently rendered component before the test has been completed.
This can be useful to validate that a component properly cleans up any DOM mutations once it has been destroyed.
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!
Because Marko batches DOM updates to avoid unnecessary re-renders, the
fireEvent helpers are re-exported as
async functions. Awaiting this ensures that the DOM has properly updated in
response to the event triggered in the test.
With client-side tests your components are rendered into a placeholder
HTMLElement. To ensure that your components are properly removed, and destroyed,
after each test the
cleanup method is called for you automatically by hooking
afterEach in supported test frameworks. You can also manually call
cleanup at any time which will remove all attached components.
You can turn off the automatic test cleanup by importing the following module:
With mocha you can use
mocha -r @marko/testing-library/dont-cleanup-after-each
as a shorthand.
If you are using Jest, you can include
setupFilesAfterEnv: ["@marko/testing-library/dont-cleanup-after-each"] in your
Jest config to avoid doing this in each file.