<script type="module">
import markoJest from 'https://cdn.skypack.dev/@marko/jest';
</script>
README
@marko/jest
A preprocessor and preset to use Marko with Jest.
Templates are automatically compiled for the correct environment based on your Jest config. Browser tests are compiled to the dom api, and server tests to the html streaming api.
const { defaults } = require("jest-config");
module.exports = {
// uses a webpack style resolver
resolver: "...",
// allows for stuff like file watching of `.marko` files
moduleFileExtensions: defaults.moduleFileExtensions.concat("marko"),
// preprocesses Marko files.
transform: { "\\.marko
quot;: "@marko/jest/transform/browser" },
// transforms `.marko` files in node_modules as well
transformIgnorePatterns: ["node_modules/.*(?<!\\.marko)quot;
};
Customizing the preset
Jest presets are extensible by default, meaning you should be able to continue to use your existing config with the Marko preset. For example, if you want typescript support you could have a config like:
You can override the default Marko compiler options by adding a Jest "globals" config with a marko property.
An additional taglib property can be set which supports an excludeDirs and excludePackages array which will prevent Marko from discovering taglibs in a directory or package respectively.
For many Marko projects you may have a mix of server and browser components. You can test all of these with Jest by using the projects configurationlike this project does! Simply make sure to use @marko/jest/preset/node and @marko/jest/preset/browser according to the test environment.
In the above example config, any tests with *.browser.js will run in a JSDOM context with browser path resolution and Marko's DOM API, those with *.server.js will instead be run in a node context with the Marko HTML streaming API.
Using tags from npm
By default Jest will not transform any .marko files within your node_modules folder. Marko recommends publishing the original source Marko files when publishing to npm. To get around this you can use the transformIgnorePatterns option in Jest and whitelist .marko files.
The @marko/jest/preset/* helpers set the ignore pattern for you. If you are using the @marko/jest/transform/* directly then you will have to do this yourself, like so:
Since jest is uses JSDOM, which has limited support for stylesheets, including styles in the page often does not add a ton of value. However in some cases it can be useful to include these styles, for example with visual-html or jsdom-screenshot.
This plugin will automatically include any Marko dependencies, including style files, if an appropriate jest transform is available.
To have Marko include a style.css file you could add jest-transform-css to your jest.config.js.
Why override the resolver (enhanced-resolve-jest)?
The default jest resolver does actually work fine with Marko when running server side tests, however in the browser they rely on browser-resolve. The browser resolver then relies on a version of resolve which is over three years old and has had many fixes since.
On top of the issues from using this outdated module, there are a number of limitations. Below i've outlined some issues and limitations you might come across because of this dependency used by jest, one of which completely stops Marko's browser modules from being resolved correctly, hence the recommendation here.