testing-stateful-components.js

import { h, Component } from 'preact';
import { describe, it } from 'mocha';
import chai, { expect } from 'chai';
import jsxAssert from 'preact-jsx-chai';
chai.use(jsxAssert);

// example stateful list component
class List extends Component {
  state = {
    items: this.props.items || []
  };
  
  removeItem = item => {
    let items = this.state.items.filter( i => i!==item );
    this.setState({ items });
  };

  render({ a }, { items }) {
    return (
      <ul class={a ? 'a' : 'b'}>
        { items.map( item => (
          <Item item={item} onRemove={this.removeItem} />
        )) }
      </ul>
    );
  }
}

class Item extends Component {
  remove = () => this.props.onRemove(item);
  render({ item }) {
    return <li onClick={this.remove}>{item}</li>
  }
}


// tests

describe('<List />', () => {
  it('should accept items as prop', () => {
    let items = ['a', 'b', 'c'];
    expect(new List({ props:{ items }}))
      .to.have.deep.property('state.items')
      .that.deep.equals(items);
  });

  it('should render items from state', () => {
    let list = new List();
    list.state.items = ['a', 'b', 'c'];
    expect(
      list.render(list.props, list.state)
    ).to.eql(
      <ul>
        <li>a</li>
        <li>b</li>
        <li>c</li>
      </ul>
    );
  });

  it('should remove items', () => {
    let list = new List();
    list.state.items = ['a', 'b', 'c'];
    list.removeItem('b');
    expect(list.state.items).to.eql(['a', 'c']);
    expect(list.render(list.props, list.state)).to.eql(
      <ul>
        <li>a</li>
        <li>c</li>
      </ul>
    );
  });
});

FWIW, "to.have.deep.property" didn't work for me, I need to use "to.have.nested.property".