Testing SDK Hooks and Provider

When writing tests for React components that use Wingify hooks like useGetFlag, you can easily mock the SDK’s hooks to control returned values and simulate different feature flag states.

Consider the following React component that uses the useGetFlag hook to check whether a feature flag is enabled and displays its status.

import React from 'react';
import { useGetFlag } from 'wingify-fme-react-sdk';

function FeatureStatus(): JSX.Element {
  const { flag, isReady } = useGetFlag('your_feature_key');

  if (!isReady) {
    return <div>Loading feature status...</div>;
  }

  return (
    <div data-testid="feature-status">
      Feature is {flag.isEnabled() ? 'Enabled' : 'Disabled'}
    </div>
  );
}

Use Jest to mock useGetFlag and WingifyProvider to return controlled values, allowing you to test component behaviour under different flag conditions:

import React from 'react';
import { render, screen } from '@testing-library/react';
import { useGetFlag } from 'wingify-fme-react-sdk'; // BUG FIX: Added missing import!

jest.mock('wingify-fme-react-sdk', () => ({
  useGetFlag: () => ({
    flag: {
      isEnabled: () => true,
      getVariable: () => 'mocked_value',
    },
    isReady: true,
  }),
  WingifyProvider: ({ children }: { children: React.ReactNode }) => <>{children}</>,
}));

const FlagComponent = () => {
  const { flag, isReady } = useGetFlag('feature-key');
  
  if (!isReady) return null;
  
  return (
    <>
      <div data-testid="flag-status">{flag.isEnabled() ? 'Enabled' : 'Disabled'}</div>
      <div data-testid="flag-variable">{flag.getVariable('varKey', 'default')}</div>
    </>
  );
};

test('renders flag enabled and variable value', () => {
  render(<FlagComponent />);
  expect(screen.getByTestId('flag-status').textContent).toBe('Enabled');
  expect(screen.getByTestId('flag-variable').textContent).toBe('mocked_value');
});

You can also refer to the Wingify FE React SDK tests here .