Usage with Jest

html-validate comes with Jest support built-in.

In you test import html-validate/jest:

import "html-validate/jest";

This makes all the custom matchers available.

API

toHTMLValidate([error?: Message], [config?: ConfigData], filename?: string)

Validates a string of HTML and passes the assertion if the markup is valid.

expect("<p></p>").toHTMLValidate();
expect("<p></i>").not.toHTMLValidate();

It accepts JSDOM elements, or any object with an outerHTML or innerHTML property that returns a string, or an html() method that returns a string.

const element = document.createElement("div");
expect(element).toHTMLValidate();

A custom configuration can be set:

expect("<p></i>").toHTMLValidate({
  rules: {
    "close-order": "off",
  },
});

By default, the configuration is read from configuration files similar to the CLI. The current test-case filename is passed into the configuration loader and can be used to apply transformers and overrides.

If you need to override the filename you can pass in a custom filename:

expect("<p></i>").toHTMLValidate("path/to/my-file.html");

Additionally, the root configuration property can be used to skip loading from configuration files entirely but remember to actually include the rules you need:

expect("<p></i>").toHTMLValidate({
  extends: ["html-validate:recommended"],
  root: true,
});

To test for presence of an error always use negated assertion expect(..).not.toHTMLValidate(). If you pass in an expected error as the first argument it will be matched using objectContaining when an error is present.

/* OK - error matches */
expect("<p></i>").not.toHTMLValidate({
  ruleId: "close-order",
  message: expect.stringContaining("Mismatched close-tag"),
});

/* Fail - wrong error */
expect("<p></i>").not.toHTMLValidate({
  ruleId: "void-style",
});

toBeValid()

Assert that a HTML-Validate report is valid.

const htmlvalidate = new HtmlValidate();
const report = htmlvalidate.validateString("<p></p>");
expect(report).toBeValid();

toBeInvalid()

Assert that a HTML-Validate report is invalid. Inverse of toBeValid().

const htmlvalidate = new HtmlValidate();
const report = htmlvalidate.validateString("<p></i>");
expect(report).toBeInvalid();

toHaveError(ruleId: string, message: string, context?: any)

Assert that a specific error is present in an HTML-Validate report.

const htmlvalidate = new HtmlValidate();
const report = htmlvalidate.validateString("<p></i>");
expect(report).toHaveError("close-order", "Mismatched close-tag, expected '</p>' but found '</i>'");

toHaveErrors(errors: Array<[string, string] | object>)

Similar to toHaveError but but asserts multiple errors. The passed list must have the same length as the report. Each error must either be [ruleId, message] or an object passed to expect.objectContaining.

const htmlvalidate = new HtmlValidate();
const report = htmlvalidate.validateString("<p></i>");
expect(report).toHaveErrors([
  ["close-order", "Mismatched close-tag, expected '</p>' but found '</i>'"],
]);

or with object syntax:

expect(report).toHaveErrors([
  {
    ruleId: "close-order",
    message: "Mismatched close-tag, expected '</p>' but found '</i>'",
  },
]);

toMatchCodeframe(snapshot?: string)

Writes out the given Report or string using codeframe formatter and compares with snapshot.

const report = htmlvalidate.validateString("...");
expect(report).toMatchCodeframe();

or

expect("...").toMatchCodeframe();

toMatchInlineCodeframe(snapshot?: string)

Writes out the given Report or string using codeframe formatter and compares with inline snapshot.

const report = htmlvalidate.validateString("...");
expect(report).toMatchInlineCodeframe(`
  "error: Attribute \\"FOO\\" should be lowercase (attr-case) at inline:1:6:
  > 1 | <div FOO=\\"bar\\"></div>
      |      ^^^
  Selector: div"
`);

or

expect("...").toMatchInlineCodeframe(`
  "error: Attribute \\"FOO\\" should be lowercase (attr-case) at inline:1:6:
  > 1 | <div FOO=\\"bar\\"></div>
      |      ^^^
  Selector: div"
`);