How does one test code leveraging FeatureFlags?

[mishkinf]

How does one test code leveraging FeatureFlags? Does it make the calls to Launch Darkly when running tests? It would be useful to have an example in the Readme.

[RovingCodeMonkey]

I second this. I am having many headaches creating Component tests when the component contains a feature flag.

[jacobmoretti]

@mishkinf & @RovingCodeMonkey Can you guys give an example of what you'd like to test? For the most part, you shouldn't need to test the functionality of react-launch-darkly and its components. If you have callbacks that you want to test the behavior of, it should be simple enough to just call those individually.

Or you can pluck the prop from FeatureFlag and call it:

const subject = (<YourComponent />);
const wrapper = shallow(subject);
const renderFeatureCallback = wrapper.find("FeatureFlag").props().renderFeatureCallback;

[RovingCodeMonkey]

The above solution is the one I ended up at.

Where it mostly causes issues is when a component ends up wrapped in a feature flag and then all of the tests for parent components start failing if they are checking the original. I was trying to find a way to get it to render default if nothing was provided.

Not the end of the world, just requires re-writing the wrapping test cases.

If there was a way to feed through a "FeatureFlag" set to enzyme to render and have it just render the underlying components that would be handy.

[jacobmoretti]

@RovingCodeMonkey In Jest, its pretty simple to mock any module. You could in theory just mock the FeatureFlag component and have it do whatever you want:

jest.mock("react-launch-darkly/build/components/FeatureFlag", () => {
  return jest.fn(() => null);
});

[jacobmoretti]

Closing this issue for lack of activity.

[tekgal]

was anyone able to make jest.mock work with the FeatureFlag

[jacobmoretti]

@tech-gal I posted this above but this should work:

jest.mock("react-launch-darkly/build/components/FeatureFlag", () => {
  return jest.fn(() => null);
});

[tekgal]

closing the loop. here is a sample code

it('isAdmin feature flag returns false', ()  => {
        let props = Object.assign({}, defaultProps);
        props.isEditable = true;
        props.btnName = 'Approve';
        props.revision = revisionParam;
        props.revision.state='pending';
        props.featureFlag = 'enable-preprod-approval';
        const wrapper = setup(props);
        const featureFlag = wrapper.find(FeatureFlag);
        const featureFlagDefaultCallback = featureFlag.props().renderDefaultCallback();
        expect(featureFlagDefaultCallback['props'].className).toEqual('btn pull-right btn-default btn-block');
        expect(featureFlagDefaultCallback['props'].disabled).toEqual(true);
        expect(featureFlagDefaultCallback['props'].id).toEqual(undefined);
        expect(featureFlagDefaultCallback['props'].value).toEqual('Approve');
        expect(featureFlagDefaultCallback['props'].onClick===undefined);
        expect(featureFlagDefaultCallback['props'].width).toEqual('100%');
        expect(featureFlagDefaultCallback['props'].children).toEqual('Approve');
    });