Refract

A module designed to make it a bit easier to access the instance of the component you're rendering for tests.

We're currently developing in React Native 0.46.x and they have a dependency on React 16 in alpha (or beta). We like to test our components using Enzyme (airbnb/enzyme), but they currently don't support React 16 as it's not in a stable release yet.

It works for the most part, but we've faced a problem accessing the underlying instance of the component when doing shallow rendering. (instance is undefined)

This package provides a workaround, by wrapping the component you want to test, and exposing the instance to you.

To use:

import Refract from 'react-refract';

import { Component } from './component.js'; // Component under test

test('Component', () => {
    // Define the props for your <Component />
    const props = { ... };

    let {wrapper, instance} = Refract(Component, props); // This is instead of doing shallow(<Component ...props/>
    let self = instance(); // Access the instance after shallow rendering, like in Enzyme

    expect(wrapper).toBeDefined();
    expect(self).toBeDefined();

    self.componentDidMount();
    expect(...).toBe(...); // Test on whatever goes on in componentDidMount...

    wrapper.find('Button[title="Click!"]').simulate('press'); // Simulate works as usual
});

You can also use the underlying Wrap function and just use shallow from enzyme if you prefer to mount your props the old fashioned way:

import { Wrap } from 'react-refract';
import { shallow } from 'enzyme';

import { Component } from './component.js'; // Component under test

test('Shallow rendering the Refracted component with enzyme manually works as well', () => {
    let { Refracted, instance } = Wrap(TestScreen);

    const props = { ... };
    let wrapper = shallow(<Refracted {...props} />); // Usual rendering of the component

    expect(wrapper).toBeDefined();

    let self = instance(); // Call this after rendering (the instance is not assigned before render is called on the component)
    expect(self).toBeDefined();

    self.componentDidMount();
    expect(...).toBe(...); // Test on whatever goes on in componentDidMount...

    wrapper.find('Button[title="Click!"]').simulate('press'); // use the enzyme wrapper as usual...
});

Enjoy!

Thanks

Thanks to the guys at airbnb/enzyme. We can't wait for further support for the react-native workflow.