preact-jsx-chai-match

Use html-looks-like to assert Preact components in JSX.

Installation

1. Download the module

   npm install preact-jsx-chai-match --save-dev
   

2. Add it to Chai

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

Usage

Before

import {render as renderToString} from 'preact-render-to-string'
import htmlLooksLike from 'html-looks-like'

const actual = renderToString(
  <Component1
    config={mockConfig}
    schema={mockSchema}
  />
)

const expected = renderToString(
  <Component2
    label={mockSchema.label}
  >
    {'{{ ... }}'}
  </Component2>
)

htmlLooksLike(component, label)

After

const actual = (
  <Component1
    config={mockConfig}
    schema={mockSchema}
  />
)

const template = (
  <Component2
    label={mockSchema.label}
  >(...)</Component2>
)

expect(actual).to.matchTemplate(template)