Setup

Marko Testing Library is not dependent on any test runner, however it is dependent on the test environment. This package works for testing both server side, and client side Marko templates and provide a slightly different implementation for each. This is done using a browser shim, just like in Marko.

The browser shim is picked up by many tools, including all bundlers and some test runners.

Below is some example configurations to test both server and browser components with some popular test runners.

Jest

For Jest to understand Marko templates you must first install the @marko/jest preset. This allows your Marko templates to be imported into your tests.

In Jest there is a browser option which will tell Jest to resolve the browser shim version of all modules as mentioned above.

To test components rendered in the client side, be sure to enable both the browser option and the preset and you are good to go!

jest.config.js

module.exports = {
  preset: '@marko/jest',
  browser: true, // Tells Jest to resolve browser shims.
}

For testing components rendered server side we can omit the browser option, however ideally you should also set the testEnvironment option to node which will disable loading JSDOM globally.

jest.config.js

module.exports = {
  preset: '@marko/jest',
  testEnvironment: 'node', // Tells Jest not to load a global JSDOM for server side.
}

A Jest configuration can also have multiple projects which we can use to create a combined configuration for server side tests, and browser side tests, like so:

jest.config.js

module.exports = {
  projects: [
    {
      displayName: 'server',
      testEnvironment: 'node',
      preset: '@marko/jest',
      testRegex: '/__tests__/[^.]+\\.server\\.js$',
    },
    {
      displayName: 'browser',
      preset: '@marko/jest',
      browser: true,
      testRegex: '/__tests__/[^.]+\\.browser\\.js$',
    },
  ],
}

Mocha

Mocha also works great for testing Marko components. Mocha, however, has no understanding of browser shims which means out of the box it can only work with server side Marko components.

To run server side Marko tests with mocha you can simply run the following command:

mocha -r marko/node-require

This enables the Marko require hook and allows you to require server side Marko templates directly in your tests.

For client side testing of your components with Mocha often you will use a bundler to build your tests (this will properly resolve the browser shims mentioned above) and then you can load these tests in some kind of browser context.

Jest#

Mocha#

Jest

Mocha