Preact Render Spy
A testing utility for Preact components that provides virtual DOM access and an enzyme-like API.
What is Preact Render Spy?
preact-render-spy is a testing utility for Preact components that allows developers to render components and inspect the resulting virtual DOM. It solves the problem of testing Preact components in isolation or full depth by providing an API similar to Enzyme, with methods to find elements, simulate events, and assert on component state and output.
Preact developers who need to write unit and integration tests for their components, especially those familiar with Enzyme's testing patterns or looking for a Preact-specific testing solution.
Developers choose preact-render-spy because it's tailored for Preact, offers both shallow and deep rendering, integrates with Jest snapshots, and provides a straightforward API for testing component behavior and lifecycle methods without requiring a full DOM environment.
Overview
Render preact components with access to the produced virtual dom for testing.
Use Cases
Best For
- Testing Preact component rendering and virtual DOM structure
- Writing unit tests with shallow rendering for component isolation
- Simulating user interactions like clicks and event handlers
- Testing component lifecycle methods such as componentWillReceiveProps
- Integrating with Jest for snapshot testing of Preact components
- Migrating Enzyme-based tests to a Preact-specific testing utility
Not Ideal For
- Projects built with React instead of Preact, as it's specifically designed for Preact components
- Teams requiring full Enzyme feature compatibility for advanced testing scenarios like complex selector nesting or extensive plugin ecosystems
- Applications needing real browser testing or integration with end-to-end frameworks like Cypress or Selenium
- Large-scale projects with strict TypeScript support or demand for extensive, commercially-backed documentation
Pros & Cons
Pros
Offers both shallow and deep rendering with configurable depth, enabling isolated component testing or full tree rendering for comprehensive integration tests.
Provides intuitive methods such as find(), simulate(), and setState(), making it easy for developers accustomed to Enzyme to write tests without a steep learning curve.
Includes a built-in snapshot serializer that seamlessly integrates with Jest for visual regression testing of Preact component outputs.
Directly supports testing lifecycle hooks like componentWillReceiveProps and componentWillUnmount through context.render() and other methods, as demonstrated in the examples.
Cons
The CSS-like selectors are restricted and do not support nesting, which can hinder complex DOM queries and make test code more verbose.
As admitted in the README, it lacks many options available in Enzyme, such as advanced traversal methods, which may limit its utility for teams migrating from Enzyme.
Requires manual setup for custom DOM implementations and has internal properties like SPY_PRIVATE_KEY that might inadvertently leak into component props, adding complexity.
Open Source Alternative To
Preact Render Spy is an open-source alternative to the following products:
Frequently Asked Questions
Found a gem we're missing?
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.