https://github.com/dab0mb/react-bobcat
A library for testing navigation flows in React
https://github.com/dab0mb/react-bobcat
Last synced: 11 months ago
JSON representation
A library for testing navigation flows in React
- Host: GitHub
- URL: https://github.com/dab0mb/react-bobcat
- Owner: DAB0mB
- License: mit
- Created: 2020-02-08T21:19:45.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T06:46:48.000Z (over 3 years ago)
- Last Synced: 2025-01-03T15:24:29.850Z (over 1 year ago)
- Language: JavaScript
- Size: 1.25 MB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Bobcat 😺😼
Bobcat is a library for testing navigation flows in React. Its API is heavily inspired by classic testing frameworks like [Mocha](https://mochajs.org/) and [Jest](https://jestjs.io/); it has a similar `describe()` / `it()` type of syntax.
### Usage
Here's a rough code snippet that demonstrates how Bobcat should be used:
```jsx
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](https://medium.com/@eytanmanor/how-to-run-react-e2e-tests-purely-with-hooks-4bc475f4bb2).
### Installation
The source is available via [Github](github.com/dab0mb/react-bobcat). 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*.
### License
MIT