Mock to reach the non default branch in the component

Viewed 20

I have the following component where I would only render either variant A or B.

The logic on which variant to render is handled via the Overall component.

In this Sample component, I am currently always landing inside the if block (default) for the
getTest method (Test A).

Is there a way I can mock the outcome such that I can land inside the else block for the
getTest method (Test B).

import React from 'react';

const Sample = () => {
  const getTest = (test) => {
    if (test === 'A') {
      return <div>
        {'Test A'}
      </div>
    } else {
      return <div>
        {'Test B'}
      </div>
    }
  }

  return (
    <div>
      <Overall defaultTest="A">
        <Test variant="A">
          {getTest('A')}
        </Test>
        <Test variant="B">
          {getTest('B')}
        </Test>
      </Overall>
    </div>
  );
};

In test, I am able to target the B variant as follows.
But in terms of coverage, this doesn't matter. I am still not entering the else block. Still ending up as default.

Is there a way around this? Thanks.

Test:

const render = props => mount(<Sample
  {...props}
/>);


it('should render B', () => {
  const renderedModule = render().find('[variant="B"]');
  expect(renderedModule).toMatchSnapshot();
});
0 Answers
Related