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.
npm install @marko/jest -D
moduleexports =preset: "@marko/jest/preset/browser";
The above is roughly equivalent to:
const defaults = ;moduleexports =// uses a webpack style resolverresolver: "..."// allows for stuff like file watching of `.marko` filesmoduleFileExtensions: defaultsmoduleFileExtensions// preprocesses Marko files.transform: "\\.marko$": "@marko/jest/transform/browser"// transforms `.marko` files in node_modules as welltransformIgnorePatterns: "node_modules/.*(?<!\\.marko)$";
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:
moduleexports =preset: "@marko/jest/preset/browser"transform:"\\.ts$": "ts-jest";
You can also get access to the preset configuration manually by importing
@marko/jest/preset/browser/jest-preset and use it like so:
const markoJest = ;moduleexports =transform: markoJesttransformtransformIgnorePatterns: markoJesttransformIgnorePatternsresolver: markoJestresolvermoduleFileExtensions: markoJestmoduleFileExtensionsbrowser: true;
Test both server & browser
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 configuration like this project does! Simply make sure to use
@marko/jest/preset/browser according to the test environment.
moduleexports =projects:displayName: "browser"preset: "@marko/jest/preset/browser"testMatch: "**/__tests__/**/*.browser.js"displayName: "server"preset: "@marko/jest/preset/node"testMatch: "**/__tests__/**/*.server.js";
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/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:
moduleexports =...transformIgnorePatterns: "node_modules/.*(?<!\\.marko)$";
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
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.
https://github.com/facebook/jest/issues/7840 https://github.com/facebook/jest/issues/5356 https://github.com/facebook/jest/issues/5356 https://github.com/facebook/jest/issues/4756 https://github.com/facebook/jest/issues/2702
Code of Conduct
This project adheres to the eBay Code of Conduct. By participating in this project you agree to abide by its terms.