README.md

React testing tools for tdd-buffet

---

This package can be used independently of tdd-buffet.

Install

npm install @tdd-buffet/react

Testing

Render components

import React from 'react';
import { expect } from 'tdd-buffet/suite/chai';
import { $render } from '@tdd-buffet/react';

const $component = $render(<span>foobar</span>);

expect($component.text()).to.equal('foobar');

The returned $component is a JQuery wrapper over the container that holds the component. You can use the familiar JQuery API to query for content ($component.find('p')), get text content ($component.text()), assert visibility ($component.find('.class').is(':visible')) and other stuff.

Fire events

The package exposes convenience methods for firing events targeted at elements inside the currently rendered component.

import React from 'react';
import { $render, click } from '@tdd-buffet/react';

$render(<button onClick={() => console.log('clicked')}>
  click me
</button>);

click('button'); // will log 'clicked'

The methods are just wrappers over testing-library/dom. The following events are currently supported:

• click,
• change.

Wait for conditions

If your component contains async logic like waiting for a promise or for a timer you can use the wait function to wait for a condition to be satisfied such as an element becoming visible.

Note that React doesn't guarantee that a render happens synchronously so it's safer to wrap your all of your assertions with wait.

import React from 'react';
import { expect } from 'tdd-buffet/suite/chai';
import { $render, wait, click } from '@tdd-buffet/react';

class MyComponent extends React.Component {
  state = { done: false };

  render() {
    return <button onClick={() => this.setState({ done: true })}>
      {this.state.done ? 'done' : 'loading'}
    </button>;
  }
}

(async () => {
  $render(<MyComponent />);
  click('button');

  await wait($container => expect($container.text()).to.equal('done'));
})();

Unmount

If your component has cleanup logic e.g. clearing timers in componentWillUnmount you can check them in your tests by manually unmounting the component.

import React from 'react';
import { expect } from 'tdd-buffet/suite/chai';

import { $render, unmount } from '@tdd-buffet/react';

const $container = $render(<span>foobar</span>);
unmount();

expect($container.text()).to.equal('');

Rerender

Rerendering a component with new props can be useful if you want to check that it reacts to the new props e.g. getDerivedStateFromProps.

import React from 'react';
import { $render, $rerender } from '@tdd-buffet/react';

$render(<span>foobar</span>);
$rerender(<span>potato</span>);

Building

Webpack

const baseConfig = require('tdd-buffet/config/webpack.config.js');

module.exports = {
  ...baseConfig
}

Setting COVERAGE=1 in your environment will instrument your code for coverage and is needed to aggregate reports.