preact-jsx-chai-match

Use [html-looks-like](https://github.com/staltz/html-looks-like) to assert Preact components in JSX.


Keywords
chai, html-looks-like, preact
License
MIT
Install
npm install preact-jsx-chai-match@0.2.0

Documentation

preact-jsx-chai-match-template

A method that adds assertions with html-looks-like to Chai for testing Preact components.

Installation

  1. Download the module

    npm install preact-jsx-chai-match-template --save-dev
    
  2. Add it to Chai

    import chai from 'chai'
    import assertMatch from 'preact-jsx-chai-match-template'
    
    chai.use(assertMatch)

Usage

const component = (
  <div class="container">
    <button type="button">Previous</button>

    <div class="article">
      <h1>Hello world</h1>
      <p>This is a test</p>
    </div>

    <button type="button">Next</button>
  </div>
)

const template = (
  <div class="container">
    (...)

    <div class="article">
      <h1>Hello world</h1>
      (...)
    </div>

    (...)
  </div>
)

expect(component).to.matchTemplate(template)