Package Exports

@gburnett/riot-testing-library

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@gburnett/riot-testing-library) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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