reblend-testing-library
Version:
Simple and complete Reblendjs testing utilities that encourage good testing practices.
75 lines • 2.31 kB
JavaScript
import { Reblend, useRef, useState } from "reblendjs";
import { render, fireEvent, screen, waitFor, queryByText } from "../";
import { useEffect } from "reblendjs";
test("render calls useEffect immediately", async () => {
const effectCb = jest.fn();
//@reblendComponent
class MyUselessComponent extends Reblend {
static ELEMENT_NAME = "MyUselessComponent";
constructor() {
super();
}
async initState() {
useEffect.bind(this)(effectCb);
}
async initProps() {
this.props = {};
}
async html() {
return Reblend.construct.bind(this)(Reblend, null);
}
}
/* @Reblend: Transformed from function to class */
await render(Reblend.construct.bind(this)(MyUselessComponent, null));
expect(effectCb).toHaveBeenCalledTimes(1);
});
test("findByTestId returns the element", async () => {
const ref = useRef();
await render(Reblend.construct.bind(this)("div", {
ref: ref,
"data-testid": "foo"
}));
expect(await screen.findByTestId("foo")).toBe(ref.current);
});
test("fireEvent triggers useEffect calls", async () => {
const effectCb = jest.fn();
//@reblendComponent
class Counter extends Reblend {
static ELEMENT_NAME = "Counter";
constructor() {
super();
}
async initState() {
useEffect.bind(this)(effectCb);
const [count, setCount] = useState.bind(this)(0, "count");
this.state.count = count;
this.state.setCount = setCount;
}
async initProps() {
this.props = {};
}
async html() {
return Reblend.construct.bind(this)(Reblend, null, Reblend.construct.bind(this)("button", {
onClick: () => this.state.setCount(this.state.count + 1)
}, this.state.count), this.state.count ? "Watch me change!" : "Click the button!");
}
}
/* @Reblend: Transformed from function to class */
const {
container: {
firstChild: {
firstChild: buttonNode
}
}
} = await render(Reblend.construct.bind(this)(Counter, null));
effectCb.mockClear();
fireEvent.click(buttonNode);
await waitFor(async () => {
screen.getByText(/Click the button!/);
});
await waitFor(async () => {
screen.getByText(/Watch me change!/);
});
expect(buttonNode).toHaveTextContent("1");
expect(effectCb).toHaveBeenCalledTimes(1);
});