reblend-testing-library/lib-esm/__tests__/renderHook.js

Simple and complete Reblendjs testing utilities that encourage good testing practices.

import Reblend, { createContext, useContext, useEffect, useState } from "reblendjs";
import { renderHook } from "../pure";
import { useProps } from "reblendjs";

//Reblend custom hooks are not yet stable
test("gives committed result", async () => {
  //@ReblendHook
  function useStateHookTest(
    /* @Reblend: Transformed from function to class */
  ) {
    const [states, setStates] = useState.bind(this)(1, "states");
    this.state.states = states;
    this.state.setStates = setStates;
    const state = {
      states: this.state.states,
      setStates: this.state.setStates
    };
    this.state.state = state;
    useEffect.bind(this)(() => {
      this.state.setStates(2);
    }, (() => []).bind(this));
    useEffect.bind(this)(() => {
      this.state.state.states = this.state.states;
    }, (() => this.state.states).bind(this));
    return this.state.state;
  }
  const {
    result
  } = await renderHook(useStateHookTest);
  expect(result.current).toEqual({
    states: 2,
    setStates: expect.any(Function)
  });
});
test("allows rerendering", async () => {
  //@ReblendHook
  function useLeftRight(
    /* @Reblend: Transformed from function to class */
  ) {
    const [left, setLeft] = useState.bind(this)("left", "left");
    this.state.left = left;
    this.state.setLeft = setLeft;
    const [right, setRight] = useState.bind(this)("right", "right");
    this.state.right = right;
    this.state.setRight = setRight;
    const result = {
      result: null
    };
    this.state.result = result;
    useProps.bind(this)(({
      current: {
        initialProps: {
          branch
        }
      }
    }) => {
      switch (branch) {
        case "left":
          this.state.result.result = [this.state.left, this.state.setLeft];
          break;
        case "right":
          this.state.result.result = [this.state.right, this.state.setRight];
          break;
        default:
          throw new Error("No Props passed. This is a bug in the implementation");
      }
    });
    return this.state.result;
  }
  const {
    result,
    rerender
  } = await renderHook(useLeftRight, {
    initialProps: {
      branch: "left"
    }
  });
  expect(result.current.result).toEqual(["left", expect.any(Function)]);
  await rerender({
    branch: "right"
  });
  expect(result.current.result).toEqual(["right", expect.any(Function)]);
});
test("allows wrapper components", async () => {
  const Context = createContext("default");
  class Wrapper extends Reblend {
    static ELEMENT_NAME = "Wrapper";
    constructor() {
      super();
    }
    async initState() {}
    async initProps({
      children
    }) {
      this.props = {};
      this.props.children = children;
    }
    async html() {
      return Reblend.construct.bind(this)(Reblend, null, this.props.children);
    }
  }
  /* @Reblend: Transformed from function to class */
  const {
    result
  } = await renderHook(function useAny(
    /* @Reblend: Transformed from function to class */
  ) {
    const ctx = useContext.bind(this)(Context, "ctx");
    this.state.ctx = ctx;
    return this.state.ctx;
  }, {
    wrapper: Wrapper
  });
  expect(result.current[0]).toEqual("default");
});