Bobcat is a library for testing navigation flows in React. Its API is heavily inspired by classic testing frameworks like Mocha and Jest; it has a similar describe() / it() type of syntax.
Here's a rough code snippet that demonstrates how Bobcat should be used:
import { useState } from 'react';
import { useDelayedEffect, useBobcat } from 'react-bobcat';
import MyButton from './components/MyButton';
import { useSignOut } from './services/auth';
export default () => {
const { scope, flow, trap, pass, assert } = useBobcat();
scope('MyApp', () => {
const signOut = useSignOut();
before(async () => {
await signOut();
});
flow('Clicking a button', () => {
// MyButton is a React component
trap(MyButton, ({ buttonRef, textRef }) => {
const [buttonClicked, setButtonClicked] = useState(false);
useDelayedEffect(() => () => {
// buttonRef is referencing a native HTML button element
buttonRef.current.click();
setButtonClicked(true);
}, 1000, [true]);
useDelayedEffect(() => {
if (!buttonClicked) return;
return () => {
assert(textRef.current.innerText, 'Clicked!')
pass(); // Go to the next scope/flow
};
}, 1000, [buttonClicked]);
});
});
scope('Another nested scope', () => {
flow('Another flow A', () => {
});
flow('Another flow B', () => {
});
});
});
scope('You can also define additional external scopes', () => {
flow('Etc', () => {
});
});
};A more in-depth explanation and code snippets can be found on Medium.
The source is available via Github. Alternatively you can install Bobcat via NPM:
$ npm install react-bobcat
or Yarn:
$ yarn add react-bobcat
*Be sure to install React@16.8 or greater.
MIT