Skip to content

JSX assertions for Chai using Algolia's react-element-to-jsx-string

License

Notifications You must be signed in to change notification settings

joinhonor/jsx-chai

 
 

Repository files navigation

jsx-chai

Version Build Status License Downloads

A port of Algolia's expect-jsx for the Chai assertion library.

It uses algolia/react-element-to-jsx-string in the background to turn React elements into formatted strings.

What's different from chai-jsx? The chai-jsx project was started after this one, but it made it to npm faster. This project was renamed to jsx-chai, and has a few key differences:

  • The jsx flag is not necessary when checking equality. If the value is a JSX element and the deep flag is enabled (either by using it explicitly, or by using eql instead of equal) then JSX comparison is performed.
  • A to.be.jsx assertion is included.
  • A browser bundle is included in the dist folder.

Installation

First make sure you have the peerDependencies installed:

npm install react

Then install jsx-chai:

npm install jsx-chai --save-dev

Assertions

JSX comparison will kick in on deep equality checks, but normal strict equality will apply when the 'deep' flag is not used.

    expect(<Component/>).to.be.jsx
    expect('Component').to.not.be.jsx
    expect(<Component/>).to.deep.equal(<Component/>)
    expect(<Component prop='value'/>).to.not.deep.equal(<Component prop='other-value'/>)
    expect(<Component/>).to.eql(<Component/>)
    expect(<Component prop='value'/>).to.not.eql(<Component otherProp='value'/>)
    expect(<Component><h1>Title</h1></Component>).to.include(<h1>Title</h1>)
    expect(<Component><h1>Title</h1></Component>).to.not.include(<div/>)

Note: include.keys() calls will look for normal object properties, and will not use JSX comparison.

Usage

Here's an example using mochajs/mocha.

import chai, {expect} from 'chai'
import jsxChai from 'jsx-chai'
import React from 'react'

chai.use(jsxChai)

class TestComponent extends React.Component {}

describe('jsx-chai', () => {

  it('works', () => {
    expect(<div/>).to.deep.equal(<div/>)
    // ok

    expect(<div a="1" b="2"/>).to.deep.equal(<div/>)
    // Error: Expected '<div\n  a="1"\n  b="2"\n/>' to equal '<div />'

    expect(<span/>).to.not.deep.equal(<div/>)
    // ok

    expect(<div><TestComponent/></div>).to.include(<TestComponent/>)
    // ok
  })

})

It looks like this when ran:

Screenshot when using mocha

A note about functions

to.deep.equal and to.eql will not check for function references, it only checks that if a function was expected somewhere, there's also a function in the actual data.

It's your responsibility to then unit test those functions.

A note about the browser bundle

If you're using the browser bundle in dist with standard browser globals, make sure you are using the un-minified development version of React with addons. This library uses React.addons.TestUtils, which is not available in the production build or the build without addons.

About

JSX assertions for Chai using Algolia's react-element-to-jsx-string

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 100.0%