Matchers

Brisa extends the Bun testing runner with custom matchers to streamline the testing process. These matchers are designed to simplify the testing of Brisa components and their behavior.

toHaveAttribute

Verifies whether a specified attribute exists within the target element.

Example:

expect(element).toHaveAttribute("name", "value");

Types:

toHaveAttribute(name: string, value?: string): void;

toHaveTagName

Checks if the target element has a specific HTML tag.

Example:

expect(div).toHaveTagName("div"); // pass
expect(span).toHaveTagName("div"); // fail

Types:

toHaveTagName(tagName: string): void;

toHaveTextContent

Ensures that the target element renders the expected text content.

Example:

expect(text).toHaveTextContent("text"); // pass
expect(text).toHaveTextContent("xt"); // fail

Types:

toHaveTextContent(text: string): void;

toContainTextContent

Verifies if the rendered text content contains a specific string.

Example:

expect(text).toContainTextContent("text"); // pass
expect(text).toContainTextContent("xt"); // pass

Types:

toContainTextContent(text: string): void;

toHaveStyle

Validates the styling properties of the target element.

Example:

expect(red).toHaveStyle("color", "red"); // pass
expect(red).toHaveStyle("color", "blue"); // fail

Types:

toHaveStyle(property: string, value: string): void;

toHaveClass

Checks for the presence of a specified CSS class within the target element.

Example:

expect(input).toHaveClass("form-control"); // pass
expect(button).toHaveClass("btn-primary"); // pass

Types:

toHaveClass(className: string): void;

toHaveValue

Verifies the current value of form elements such as input fields.

Example:

expect(input).toHaveValue("example");

Types:

toHaveValue(value: string): void;

toHaveFocus

Indicates whether the target element currently has focus.

Example:

expect(input).toHaveFocus();
expect(input).not.toHaveFocus();

Types:

toHaveFocus(): void;

toBeVisible

Checks if the target element is visible within the DOM.

Example:

expect(element).toBeVisible();
expect(element).not.toBeVisible();

Types:

toBeVisible(): void;

toBeEnabled

Verifies that the target element is enabled and interactive.

Example:

expect(button).toBeEnabled();
expect(button).not.toBeEnabled();

Types:

toBeEnabled(): void;

toBeDisabled

Indicates whether the target element is disabled and non-interactive.

Example:

expect(button).toBeDisabled();
expect(button).not.toBeDisabled();

Types:

toBeDisabled(): void;

toBeChecked

Checks if the target element is checked.

Example:

expect(checkbox).toBeChecked();
expect(checkbox).not.toBeChecked();

Types:

toBeChecked(): void;

toBeSelected

Indicates whether the target element is selected.

Example:

expect(option).toBeSelected();
expect(option).not.toBeSelected();

Types:

toBeSelected(): void;

toBeRequired

Indicates whether the target element is required.

Example:

expect(input).toBeRequired();
expect(input).not.toBeRequired();

Types:

toBeRequired(): void;

toBeInvalid

Indicates whether the target element is invalid.

Example:

expect(input).toBeInvalid();
expect(input).not.toBeInvalid();

Types:

toBeInvalid(): void;

toBeValid

Checks if the target element is valid.

Example:

expect(input).toBeValid();
expect(input).not.toBeValid();

Types:

toBeValid(): void;

toBeInputTypeOf

Verifies the target element type.

Example:

expect(input).toBeInputTypeOf("text");
expect(input).not.toBeInputTypeOf("password");

Types:

toBeInputTypeOf(type: string): void;

toBeInTheDocument

Checks if the target element is present in the DOM.

Example:

expect(element).toBeInTheDocument();
expect(element).not.toBeInTheDocument();

Types:

toBeInTheDocument(): void;

toHaveElementByNodeName

Verifies the presence of an element with a specific node name.

Example:

expect(element).toHaveElementByNodeName("div");
expect(element).not.toHaveElementByNodeName("span");

Types:

toHaveElementByNodeName(nodeName: string): void;

More Matchers from Bun

In addition to the custom matchers provided by Brisa, you can also use the default matchers from Bun, such as toBe, toEqual, toBeTruthy, toBeFalsy...

For more information on how to use these matchers, refer to the Bun documentation.