Question 1

How do I test a Preact component with preact-render-spy?

Accepted Answer

Install the package, import shallow() or deep() to render your component, then use methods like find() to select elements and simulate() to trigger events. For example, shallow(<MyComponent />) creates a test context for assertions on the virtual DOM.

Question 2

preact-render-spy vs Enzyme for Preact testing

Accepted Answer

preact-render-spy is Preact-specific with a simpler API and dual rendering, but Enzyme has more features and broader support. Choose preact-render-spy for lightweight, focused testing, but opt for Enzyme if you need advanced selectors or full React/Preact ecosystem compatibility.

Question 3

Does preact-render-spy work with TypeScript?

Accepted Answer

The README does not mention TypeScript support, so it likely lacks official type definitions. Developers may need to create custom types or rely on community contributions for TypeScript integration.

Question 4

How to simulate a click event in preact-render-spy?

Accepted Answer

Use the simulate() method on an element with an onClick attribute. For instance, context.find('[onClick]').simulate('click') triggers the handler, as shown in the example tests for ClickCount components.

Question 5

Can I use preact-render-spy with test runners other than Jest?

Accepted Answer

Yes, while optimized for Jest with snapshot support, the library should work with other runners like Mocha or Jasmine, as it doesn't have hard dependencies on Jest-specific features beyond snapshots.

Question 6

What lifecycle methods can I test with preact-render-spy?

Accepted Answer

You can test methods such as componentWillReceiveProps by using context.render() to update props, and componentWillUnmount by rendering null, as illustrated in the provided examples for ReceivesProps and Unmount components.

Preact Render Spy

What is Preact Render Spy?

Overview

Use Cases

Best For

Related Projects

Found a gem we're missing?

Not Ideal For

Pros & Cons

Pros

Cons

Open Source Alternative To

Frequently Asked Questions