ReasonReact

ReasonReact

  • Docs
  • Try
  • Examples
  • Community
  • Blog
  • Languages iconEnglish
    • 日本語
    • Español
    • Français
    • 한국어
    • Português (Brasil)
    • Русский
    • 中文
    • 繁體中文
    • Help Translate
  • GitHub

›Core

Getting Started

  • What & Why
  • Installation
  • Intro Example

Core

  • Components
  • JSX (Version 3)
  • Event
  • Style
  • Router
  • Working with DOM
  • Refs in React
  • ReasonReactCompat: migrating to 0.7.0 and JSX v3
  • Testing ReasonReact components

ReactJS Idioms Equivalents

  • Invalid Prop Name
  • Props Spread
  • Component as Prop
  • Ternary Shortcut
  • Context & Mixins
  • Custom Class/Component Property
  • Using Event Values With useState
  • Error boundaries

Record API (deprecated)

  • JSX (Old, Version 2)
  • Creation, Props & Self
  • Render
  • Callback Handlers
  • State, Actions & Reducer
  • Lifecycles
  • Instance Variables
  • React Ref
  • Talk to Existing ReactJS Code
  • cloneElement
  • Children
  • Subscriptions Helper
  • Router

FAQ

  • I'm Having a Type Error
  • Record Field send/handle Not Found
  • send/handle callbacks having Incompatible Types
  • I Really Need Feature X From ReactJS
  • Element Type is Invalid Runtime Error
  • I want to create a DOM element without JSX
Edit

Testing ReasonReact components

Even though types make your code safer, it doesn't remove the need for testing! If you want to test your ReasonReact components using your JavaScript testing stack, that's perfectly alright, but if you prefer to write them in Reason, here are some testing frameworks and bindings to make your life easier:

Test framework

Pick the test framework you like the best (both use Jest under the hood):

  • reason-test-framework
  • bs-jest

Test utilities

We provide test utilities in the ReactTestUtils module.

Here's what a test might look like:

open TestFramework;
open ReactTestUtils;

describe("My basic test", ({test, beforeEach, afterEach}) => {
  // Here, we prepare an empty ref that will eventually be
  // the root node for our test
  let container = ref(None);

  // Before each test, creates a new div root
  beforeEach(prepareContainer(container));
  // After each test, removes the div
  afterEach(cleanupContainer(container));

  test("can render DOM elements", ({expect}) => {
    // The following function gives us the div
    let container = getContainer(container);

    // Most of the ReactTestUtils API is there 
    act(() => {
      ReactDOMRe.render(<div> "Hello world!"->React.string </div>, container)
    });

    expect.bool(
      container
      // We also provide some basic DOM querying utilities
      // to ease your tests
      ->DOM.findBySelectorAndTextContent("div", "Hello world!")
      ->Option.isSome,
    ).
      toBeTrue();
  });
});

API

ReactTestUtils

Directly from the React test utilities.

  • act
  • actAsync (let's your return a promise)
  • isElement
  • isElementOfType
  • isDOMComponent
  • isCompositeComponent
  • isCompositeComponentWithType

And utilities for setup and teardown:

  • prepareContainer
  • cleanupContainer
  • getContainer

ReactTestUtils.Simulate

  • Simulate.click
  • Simulate.clickWithEvent
  • Simulate.change
  • Simulate.changeWithEvent
  • Simulate.changeWithValue
  • Simulate.changeWithChecked
  • Simulate.focus
  • Simulate.blur
  • Simulate.canPlay
  • Simulate.timeUpdate
  • Simulate.ended

If you feel like some are missing, you can easily adapt the bindings: ReactTestUtils and make a PR!

ReactTestUtils.DOM convenience functions

  • value
  • findBySelector
  • findByAllSelector
  • findBySelectorAndTextContent
  • findBySelectorAndPartialTextContent
← ReasonReactCompat: migrating to 0.7.0 and JSX v3Invalid Prop Name →