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();
});