34
43%
MIT
bs-enzyme
0.6.1
Bucklescript bindings for Enzyme
bindingreacttesting
homepagerepositorynpmissuesdocumentation

bs-enzyme

Travis npm (scoped)

BuckleScript bindings for Enzyme

:construction: Note: This package is still very experimental. Expect frequent, breaking changes right up until 1.0 is released. :construction:

Status

  • Most of the shallow and mount APIs are implemented
  • The simulate method is currently wrapped in multiple simulateN functions to handle mixed variadic arguments
  • The render API isn't implemented
  • I haven't extensively tested most of the functions, so some might be broken

Example

Using the excellent bs-jest and Airbnb's official enzyme-adapter-react-16.

  • RE
  • ML 
open Jest;

Enzyme.configureEnzyme(Enzyme.react_16_adapter());

let setup = (~title="Test", ~handleClick=(_evt) => (), ()) =>
  Enzyme.shallow(<DummyComponent title handleClick />);

let header = (wrapper) =>
wrapper
  |> Enzyme.Shallow.find("#header")
  |> Enzyme.Shallow.first;

let listItems = (wrapper) =>
  wrapper
  |> Enzyme.Shallow.find("#list")
  |> Enzyme.Shallow.children;

describe("DummyComponent", () => {
  open Expect;

  test("renders a #header", () => {
    let title = "A test title";
    let wrapper = setup(~title, ());
    let headerNodes = wrapper |> header;
    expect(Enzyme.Shallow.length(headerNodes)) |> toBe(1)
  });

  test("has the expected h1 tag in the #header", () => {
    let title = "A test title";
    let wrapper = setup(~title, ());
    let expectedNode = <h1> (ReasonReact.stringToElement(title)) </h1>;
    expect(Enzyme.Shallow.contains(expectedNode, wrapper)) |> toBe(true)
  });

  test("initially has its `clicked` state set to false", () => {
    let wrapper = setup();
    let {clicked}: DummyComponent.state = Enzyme.Shallow.state(wrapper);
    expect(clicked) |> toBe(false)
  });

  test("folds left properly", () => {
    let items = setup() |> listItems;
    let result = Enzyme.Shallow.foldLeft((text, node) => text ++ Enzyme.Shallow.text(node), "", items);
    expect(result) |> toBe("OneTwoThree")
  });

  test("maps properly", () => {
    let items = setup() |> listItems;
    let result = Enzyme.Shallow.map(node => Enzyme.Shallow.text(node), items);
    expect(result) |> toEqual([|"One", "Two", "Three"|])
  });
});
open Jest
let _ = Enzyme.configureEnzyme (Enzyme.react_16_adapter ())
let setup ?(title= "Test")  ?(handleClick= fun _evt  -> ())  () =
  Enzyme.shallow
    ((DummyComponent.createElement ~title ~handleClick ~children:[] ())
    [@JSX ])
let header wrapper =
  (wrapper |> (Enzyme.Shallow.find "#header")) |> Enzyme.Shallow.first
let listItems wrapper =
  (wrapper |> (Enzyme.Shallow.find "#list")) |> Enzyme.Shallow.children
let _ =
  describe "DummyComponent"
    (fun ()  ->
       let open Expect in
         test "renders a #header"
           (fun ()  ->
              let title = "A test title" in
              let wrapper = setup ~title () in
              let headerNodes = wrapper |> header in
              (expect (Enzyme.Shallow.length headerNodes)) |> (toBe 1));
         test "has the expected h1 tag in the #header"
           (fun ()  ->
              let title = "A test title" in
              let wrapper = setup ~title () in
              let expectedNode =
                ((h1 ~children:[ReasonReact.stringToElement title] ())
                [@JSX ]) in
              (expect (Enzyme.Shallow.contains expectedNode wrapper)) |>
                (toBe true));
         test "initially has its `clicked` state set to false"
           (fun ()  ->
              let wrapper = setup () in
              let ({ clicked } :DummyComponent.state)=
                Enzyme.Shallow.state wrapper in
              (expect clicked) |> (toBe false));
         test "folds left properly"
           (fun ()  ->
              let items = (setup ()) |> listItems in
              let result =
                Enzyme.Shallow.foldLeft
                  (fun text  ->
                     fun node  -> text ^ (Enzyme.Shallow.text node)) "" items in
              (expect result) |> (toBe "OneTwoThree"));
         test "maps properly"
           (fun ()  ->
              let items = (setup ()) |> listItems in
              let result =
                Enzyme.Shallow.map (fun node  -> Enzyme.Shallow.text node)
                  items in
              (expect result) |> (toEqual [|"One";"Two";"Three"|])))

See more examples in the project's tests directory.

Installation

With npm:

npm install --save-dev bs-enzyme enzyme-adapter-react-16

With Yarn:

yarn add --dev bs-enzyme enzyme-adapter-react-16

Then add bs-enzyme to bs-dev-dependencies in your bsconfig.json:

{
  ...
  "bs-dev-dependencies": ["bs-enzyme"]
}

Note: If you're using this package with bs-jest, be sure to list bs-enzyme first in your dependencies.

Project

Made with

Reason