如何开玩笑地模拟另一个反应组件中的函数？

Question

I have been trying to write tests for the following react component which returns different components depending on my props:

const Choice: React.FC<States> = props => {
    function getChoiceComponent(): JSX.Element {
        if (props.choices) {
            return <FirstComponent {...props} />;
        } else {
            return <SecondComponent {...props} />;
        }
    }

    return <>{getChoiceComponent()}</>;
};

How can I mock getChoiceComponent function and test it?

Answer 1

We should test the react component by changing the props and state rather than test the getChoiceComponent method directly. Here is the unit test solution,

index.tsx :

import React from 'react';
import FirstComponent from './first';
import SecondComponent from './second';

type States = any;

const Choice: React.FC<States> = (props) => {
  function getChoiceComponent(): JSX.Element {
    if (props.choices) {
      return <FirstComponent {...props} />;
    } else {
      return <SecondComponent {...props} />;
    }
  }

  return <>{getChoiceComponent()}</>;
};

export default Choice;

first.tsx :

import React from 'react';
const FirstComponent = () => <div>first component</div>;

export default FirstComponent;

second.tsx :

import React from 'react';
const SecondComponent = () => <div>second component</div>;

export default SecondComponent;

index.test.tsx :

import Choice from './';
import FirstComponent from './first';
import SecondComponent from './second';
import React from 'react';
import { shallow } from 'enzyme';

describe('60152774', () => {
  it('should render first component', () => {
    const props = { choices: [] };
    const wrapper = shallow(<Choice {...props}></Choice>);
    expect(wrapper.find(FirstComponent)).toBeTruthy();
  });

  it('should render second component', () => {
    const props = {};
    const wrapper = shallow(<Choice {...props}></Choice>);
    expect(wrapper.find(SecondComponent)).toBeTruthy();
  });
});

Unit test results with coverage report:

 PASS  stackoverflow/60152774/index.test.tsx
  60152774
    ✓ should render first component (20ms)
    ✓ should render second component (5ms)

------------|---------|----------|---------|---------|-------------------
File        | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
------------|---------|----------|---------|---------|-------------------
All files   |   88.24 |      100 |      50 |     100 |                   
 first.tsx  |      75 |      100 |       0 |     100 |                   
 index.tsx  |     100 |      100 |     100 |     100 |                   
 second.tsx |      75 |      100 |       0 |     100 |                   
------------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        3.065s

Source code: https://github.com/mrdulin/react-apollo-graphql-starter-kit/tree/master/stackoverflow/60152774