riot-testing-library

A simple testing library for testing Riot.js components with dom-testing-library

Basic Example

For a basic example see how I test the hidden message component.

<hidden-message>
  <div>
    <label for='toggle'>Show Message</label>
    <input id='toggle' type='checkbox' onchange={e => setShowMessage(e.target.checked)} checked={state.showMessage} />
    <div if={state.showMessage}>{props.message}</div>
  </div>
  <script>
    export default {
      onMounted() {
        this.update({ showMessage: false })
      },
      setShowMessage(showMessage) {
        this.update({ showMessage });
      }
    }
  </script>
</hidden-message>

import {
  render,
  cleanup,
  fireEvent
} from "../dist/riot-testing-library.esm.js";
import "@testing-library/jest-dom/extend-expect";
import HiddenMessage from "../tmp/hidden-message";

describe("components/hidden-message", () => {
  afterEach(cleanup);

  it("shows the children when the checkbox is checked", () => {
    const message = "Oh hai, Mark!";
    const { queryByText, getByLabelText, getByText } = render(HiddenMessage, {
      attributes: { message }
    });

    expect(queryByText(message)).toBeNull();

    fireEvent.click(getByLabelText("Show Message"));

    expect(getByText(message)).toBeInTheDocument();
  });
});

Acknowledgement

This is an attempt to test riot components in the way that Kent C. Dodds suggests testing react components.

For more info see react-testing-library. See also this blog post