Skip to main content

Examples

You can find more bs-dom-testing-library examples at wyze/bs-dom-testing-library/src/__tests__.

You can find more bs-react-testing-library examples at wyze/bs-react-testing-library/src/__tests__.

React Testing Library

Component_test.re
open Jest;
open Expect;
open ReactTestingLibrary;

test("Component renders", () =>
<div style=ReactDOMRe.Style.make(~color="rebeccapurple", ())>
<h1> {ReasonReact.string("Heading")} </h1>
</div>
|> render
|> container
|> expect
|> toMatchSnapshot
);

DOM Testing Library

The below examples use bs-webapi to help with typings and creating events.

getByText

__tests__/example_test.re
open Jest;
open DomTestingLibrary;
open Expect;

type parser;

[@bs.new]
external domParser : unit => parser = "DOMParser";

[@bs.send.pipe : parser]
external parseFromString : ( string, [@bs.as "text/html"] _) => Dom.element = "";

[@bs.get]
external body : Dom.element => Dom.element = "";

[@bs.get]
external firstChild : Dom.element => Dom.element = "";

let div = domParser()
|> parseFromString({j|
<div>
<b title="greeting">Hello,</b>
<p data-testid="world"> World!</p>
<input type="text" placeholder="Enter something" />
<input type="text" value="Some value" />
<img src="" alt="Alt text" />
</div>
|j})
|> body
|> firstChild;

describe("getByText", () => {
test("works with string matcher", () => {
let actual = div |> getByText(~matcher=`Str("Hello,"));

expect(actual) |> toMatchSnapshot;
});

test("works with regex matcher", () => {
let actual = div |> getByText(~matcher=`RegExp([%bs.re "/\\w!/"]));

expect(actual) |> toMatchSnapshot;
});

test("works with function matcher", () => {
let matcher = ( _text, node ) => (node |> tagName) === "P";
let actual = div |> getByText(~matcher=`Func(matcher));

expect(actual) |> toMatchSnapshot;
});
});

FireEvent

open Jest;
open DomTestingLibrary;
open Expect;

describe("FireEvent", () => {
test("click works", () => {
open Webapi.Dom;

let node = document |> Document.createElement("button");
let spy = JestJs.inferred_fn();
let fn = spy |> MockJs.fn;
let clickHandler = _ => [@bs] fn("clicked!") |> ignore;

node |> Element.addEventListener("click", clickHandler);

FireEvent.click(node);

expect(spy |> MockJs.calls) |> toEqual([|"clicked!"|]);
});

test("change works", () => {
open Webapi.Dom;

let node = document |> Document.createElement("input");
let spy = JestJs.inferred_fn();
let fn = spy |> MockJs.fn;
let changeHandler = _ => [@bs] fn("changed!") |> ignore;
let event = Event.makeWithOptions("change", { "target": { "value": "1" } });

node |> Element.addEventListener("change", changeHandler);

FireEvent.change(node, event);

expect(spy |> MockJs.calls) |> toEqual([|"changed!"|]);
});
});