@khaligh/nifix

Nifix is a JavaScript Testing utility for React that makes it easier to assert, manipulate, and traverse your React Components' output.

Nifix's API is meant to be intuitive and flexible by mimicking jQuery's API for DOM manipulation and traversal.

Upgrading from Nifix 2.x or React < 16

Are you here to check whether or not Nifix is compatible with React 16? Are you currently using Nifix 2.x? Great! Check out our migration guide for help moving on to Nifix v3 where React 16 is supported.

Installation

To get started with Nifix, you can simply install it via npm. You will need to install Nifix along with an Adapter corresponding to the version of react (or other UI Component library) you are using. For instance, if you are using Nifix with React 16, you can run:

npm i nifix

Each adapter may have additional peer dependencies which you will need to install as well. For instance, Nifix-adapter-react-16 has peer dependencies on react and react-dom.

At the moment, Nifix has adapters that provide compatibility with React 16.x, React 15.x, React 0.14.x and React 0.13.x.

The following adapters are officially provided by Nifix, and have the following compatibility with React:

| Nifix Adapter Package | React semver compatibility | | --- | --- | | Nifix-adapter-react-16 | ^16.4.0-0 | | Nifix-adapter-react-16.3 | ~16.3.0-0 | | Nifix-adapter-react-16.2 | ~16.2 | | Nifix-adapter-react-16.1 | ~16.0.0-0 \|\| ~16.1 | | Nifix-adapter-react-15 | ^15.5.0 | | Nifix-adapter-react-15.4 | 15.0.0-0 - 15.4.x | | Nifix-adapter-react-14 | ^0.14.0 | | Nifix-adapter-react-13 | ^0.13.0 |

Finally, you need to configure Nifix to use the adapter you want it to use. To do this, you can use the top level configure(...) API.

import Nifix from 'Nifix';
import Adapter from 'Nifix-adapter-react-16';

Nifix.configure({ adapter: new Adapter() });

3rd Party Adapters

It is possible for the community to create additional (non-official) adapters that will make Nifix work with other libraries. If you have made one and it's not included in the list below, feel free to make a PR to this README and add a link to it! The known 3rd party adapters are:

Basic Usage

Shallow Rendering

import React from 'react';
import { expect } from 'chai';
import { shallow } from 'Nifix';
import sinon from 'sinon';

import MyComponent from './MyComponent';
import Foo from './Foo';

describe('<MyComponent />', () => {
  it('renders three <Foo /> components', () => {
    const wrapper = shallow(<MyComponent />);
    expect(wrapper.find(Foo)).to.have.lengthOf(3);
  });

  it('renders an `.icon-star`', () => {
    const wrapper = shallow(<MyComponent />);
    expect(wrapper.find('.icon-star')).to.have.lengthOf(1);
  });

  it('renders children when passed in', () => {
    const wrapper = shallow((
      <MyComponent>
        <div className="unique" />
      </MyComponent>
    ));
    expect(wrapper.contains(<div className="unique" />)).to.equal(true);
  });

  it('simulates click events', () => {
    const onButtonClick = sinon.spy();
    const wrapper = shallow(<Foo onButtonClick={onButtonClick} />);
    wrapper.find('button').simulate('click');
    expect(onButtonClick).to.have.property('callCount', 1);
  });
});

Read the full API Documentation

Full DOM Rendering

import React from 'react';
import sinon from 'sinon';
import { expect } from 'chai';
import { mount } from 'Nifix';

import Foo from './Foo';

describe('<Foo />', () => {
  it('allows us to set props', () => {
    const wrapper = mount(<Foo bar="baz" />);
    expect(wrapper.props().bar).to.equal('baz');
    wrapper.setProps({ bar: 'foo' });
    expect(wrapper.props().bar).to.equal('foo');
  });

  it('simulates click events', () => {
    const onButtonClick = sinon.spy();
    const wrapper = mount((
      <Foo onButtonClick={onButtonClick} />
    ));
    wrapper.find('button').simulate('click');
    expect(onButtonClick).to.have.property('callCount', 1);
  });

  it('calls componentDidMount', () => {
    sinon.spy(Foo.prototype, 'componentDidMount');
    const wrapper = mount(<Foo />);
    expect(Foo.prototype.componentDidMount).to.have.property('callCount', 1);
    Foo.prototype.componentDidMount.restore();
  });
});

Read the full API Documentation

Static Rendered Markup

import React from 'react';
import { expect } from 'chai';
import { render } from 'Nifix';

import Foo from './Foo';

describe('<Foo />', () => {
  it('renders three `.foo-bar`s', () => {
    const wrapper = render(<Foo />);
    expect(wrapper.find('.foo-bar')).to.have.lengthOf(3);
  });

  it('renders the title', () => {
    const wrapper = render(<Foo title="unique" />);
    expect(wrapper.text()).to.contain('unique');
  });
});

Read the full API Documentation

Future

Nifix Future

Contributing

See the Contributors Guide

In the wild

Organizations and projects using Nifix can list themselves here.

License

MIT