https://github.com/localvoid/jest-hooks-dom
https://github.com/localvoid/jest-hooks-dom
Last synced: 6 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/localvoid/jest-hooks-dom
- Owner: localvoid
- License: mit
- Created: 2020-05-11T12:15:26.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T05:34:56.000Z (about 3 years ago)
- Last Synced: 2025-01-25T06:25:23.146Z (about 1 year ago)
- Language: TypeScript
- Size: 1.29 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
`jest-hooks-dom` is a collection of [hooks](https://github.com/localvoid/jest-hooks) for DOM testing with
[Jest](https://jestjs.io/) library.
## Hooks
### Elements
`useHTMLElement(element, container)` creates a new HTML element before each test and optionally mounts it to the
container. After each test HTML element is removed from container.
`useSVGElement(element, container)` creates a new SVG element before each test and optionally mounts it to the
container. After each test SVG element is removed from container.
`useHTMLTemplate(html, container)` create a new HTML from template before each test and optionally mounts it to the
container. After each test all root nodes are removed from container.
```js
const t = useHTMLTemplate(`
A
B
`);
describe("template", () => {
it("should find all nodes by id", () => {
expect(t.a.textContent).toBe("A");
expect(t.b.textContent).toBe("B");
});
});
```
### Mutation Tracking
`useDOMMutationTracker()` tracks DOM mutations.
Methods and properties tracked:
- `Document.prototype.createElement`
- `Document.prototype.createElementNS`
- `Document.prototype.createTextNode`
- `Node.prototype.appendChild`
- `Node.prototype.insertBefore`
- `Node.prototype.replaceChild`
- `Node.prototype.removeChild`
- `Node.prototype.textContent`
- `Node.prototype.nodeValue`
- `Element.prototype.innerHTML`
```js
import { useModule } from "jest-hooks";
import { useResetDOM, useHTMLElement, useDOMMutationTracker } from "jest-hooks-dom";
useResetDOM();
const root = useHTMLElement();
const mutations = useDOMMutationTracker();
const ivi = useModule("ivi");
const r = (op: Op) => ivi.render(op, root());
describe("fragment", () => {
describe("mount", () => {
test("[]", () => {
r([]);
expect(mutations.stats).toMatchSnapshot();
});
});
});
```
### Events
`useResetDOMEventListeners()` tracks all unregistered event listeners and automatically removes them after each test.
### requestAnimationFrame
`useRequestAnimationFrame()` mocks `requestAnimationFrame()` and `cancelAnimationFrame()`, and resets all tasks after
each test.