React testing
Since stateless components are a function of their properties we can easily test the output based on input.
renderToStaticMarkup(<Input x={'todo'}/>) === '<input type="text" value="todo"/>';
renderToStaticMarkup(<Input x={'one more time'}/>) === '<input type="text" value="one more time"/>';
We can also fully test a component through mock interactions without the need mock external dependencies nested deep inside a component.
let value = 'foo';
const mockChange = (event) => value = event.target.value;
const input = renderIntoDocument(<Input value={value} onChange={mockChange}/>);
const field = findDOMNode(input.refs.field);
expect(field).to.equal('foo');
Simulate.change(field, {
target: {
value: 'bar'
}
});
expect(value).to.equal('bar');