rescript-dom-testing-library

ReScript bindings for @testing-library/dom

Usage no npm install needed!

<script type="module">
  import rescriptDomTestingLibrary from 'https://cdn.skypack.dev/rescript-dom-testing-library';
</script>

README

ReScript DOM Testing Library

npm GitHub Workflow Status Codecov

ReScript bindings for testing-library/dom.

Install

npm install --save-dev rescript-dom-testing-library
# or yarn
yarn add --dev rescript-dom-testing-library

Update your bsconfig file:

{
  "bs-dev-dependencies": ["rescript-dom-testing-library"]
}

Usage

open Jest
open JestDom
open DomTestingLibrary

let render = %raw(`
  function(html) {
    const body = document.querySelector('body')
    body.innerHTML = html
    return body
  }
`)

let example = render(`
<label htmlFor="color">
  Select a color
  <select id="color">
    <option>Red</option>
    <option>Green</option>
    <option>Blue</option>
  </select>
</label>
`)

test("renders label", () => {
  example
  ->getByLabelText(~matcher=#RegExp(Js.Re.fromString("select a color")))
  ->expect
  ->toBeInTheDocument
})

test("renders red option (using string)", () => {
  let options = makeByRoleOptions(~name="Red", ())

  example
  ->getByRole(~matcher=#Str("option"), ~options)
  ->expect
  ->toBeInTheDocument
})

test("renders red option (using regular expression)", () => {
  let options = makeByRoleOptionsWithRegex(
    ~name=Js.Re.fromStringWithFlags("/green/", ~flags="i"),
    (),
  )

  example
  ->getByRole(~matcher=#Str("option"), ~options)
  ->expect
  ->toBeInTheDocument
})

test("renders blue option (using custom function)", () => {
  let options = makeByRoleOptionsWithFunction(~name=(content, _element) => content === "Blue", ())

  example
  ->getByRole(~matcher=#Str("option"), ~options)
  ->expect
  ->toBeInTheDocument
})


See the tests for more examples.