Enzyme testing cheatsheet (jasmine-enzyme)

jasmine-enzyme-cheatsheet.md

Debug an element: console.log(element.debug())

Test the html rendered: expect(element.html()).toEqual('<div>content</div>');

Find a component: element.find('ComponentName') or element.find(ComponentName) eg: expect(element.find('Component').length).toBe(1) expect(element.find('Component')).toBePresent()

Test the component prop: expect(element.find('Component')).toHaveProp('message', 'there is an error')

Test component method:

const element = shallow(<Component />);
const instance = element.instance()
expect(instance.sayHello()).toEqual('hello')

Spies and simulations: If you have to spy on a component method for event tests, you would have to call element.update() after spying to bind the spy to the instance enzymejs/enzyme#365 Currently, event simulation for the shallow renderer does not propagate as one would normally expect in a real environment. As a result, one must call .simulate() on the actual node that has the event handler set.

Simulate text field change: element.find('input').simulate('change', {target: {value: 'some text'}});

Update the props of a rendered component to trigger componentWillReceiveProps: component.setProps(newProps);

Testing jsx returned (not rendered) by methods:

import ReactDOMServer from 'react-dom/server';
const resultAsString = ReactDOMServer.renderToString(testMethod()); //returns <div>Hello</div>
const resultAsStaticMarkup = ReactDOMServer.renderToStaticMarkup(testMethod());
expect(resultAsString).toEqual('<div>Hello</div>');
expect(resultAsStaticMarkup).toEqual('Hello');

Test that the component jsx is null (does not render): expect(component.type()).toBeNull()

Get the DOM node object from an enzyme wrapper: component.getDOMNode().click()

Link to enzyme docs

Link to jasmine docs

To access .refs

const element = mount(<Component />);
const ref = element.ref('myRef');

note: shallow() will not work

When a child component of the component you are testing uses redux's connect(), you have to wrap your component selector with Connect().

defaultElement.find('FinanceAmountField') will no longer work when FinanceAmountField is "connected" instead use:
defaultElement.find('Connect(FinanceAmountField)')

When testing a non-connected component that renders a connected component I ran into the following oddity...

The following test (using jasmine-enzyme's toHaveClassName) produced Invariant Violation: Could not find "store" in either the context or prop complaints:
expect(component.find('td')).toHaveClassName('rf-table__cell--align-middle');

while the following test (using enzyme's hasClass) passed without any complaints
expect(component.find('td').hasClass('rf-table__cell--align-middle')).toEqual(true);

Similar to the toHaveClassName problem in the previous comment...I've experienced the same problem with toBePresent when the rendered component was either connected or one of its heirs was connected.
Solution was to use length