Skip to content

The weekend is coming and we thought it be a good time to make another alpha release for everyone to play with πŸŽ‰

This was a wonderful week for us. More and more bug reports contain links to a reproducible test case. You all are simply amazing! We wouldn't be able to fix this many bugs without all your help πŸ‘ Even our contributions had an alltime high with excellent PRs from the community!

Despite fixing many bugs we landed a new package to help you test hooks in Preact πŸŽ‰

Introducing preact/test-utils

With hooks having their own scheduling logic, we didn't have a good testing story up until now! First-time contributor @JoviDeCroock went right into it and quickly had a prototype running. With the blink of an eye he had a PR that was ready to be merged. These testing utilities are inspired by the excellent react-dom/test-utils tools and share a similar act() function πŸ‘

For testing hooks effectively we need to flush pending effects synchronously. The brand new act() function allows you to do just that:

import { act } from "preact/test-utils";

let spy = sinon.spy();
function StateContainer() {
  return <div />;

// Wrap the render() with `act` to flush hooks automatically
act(() => render(<StateContainer />, document.body));

// Do your assertions πŸŽ‰

If you're working with class-based components you can use the new setupRerender function to flush pending state updates in your tests:

import { rerender, Component } from "preact/test-utils";

// Setup rerender logic first
const rerender = setupRerender();

let updateState;
class App extends Component {
  constructor() {
    this.state = { count: 0 };
    updateState = () => this.setState(prev => ({ count: ++prev.count }));

  render() {
    return <div>count: {this.state.count]}</div>;

// Render your component
render(<App />, dom);
expect(dom.textContent).to.equal("count: 0");

// Trigger a state update

// Flush all state updates

expect(dom.textContent).to.equal("count: 1");

It's his first contribution to Preact and we couldn't be more ecstatic about his work. Give him a round of applause πŸ‘ It's also good to know for us that our code remains very accessible for new contributors.




Assets 2
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.