How to test conditional rendering of components using Jest and Enzyme

Question

I have a conditional rendering block in my React component which is defined as:

 {(props.email.primary.isPending) ?
          <PendingComponent emailAddress={props.email.primary.pendingEmail} />
          :
          <SecondaryEmailContact
            state={props.email.secondary}
            retrieveInputData={props.retrieveInputData}
            handleSecondaryEmailToggle={props.handleSecondaryEmailToggle}
            handleDelete={props.handleDelete}
            handleSubmitContact={props.handleSubmitContact}
            refs={props.refs}
          />
        }

I have written a test case as below:

it('renders the EditEmailContact component', () => {
        wrapper=mount(<EditEmailContact 
          email={emailState}
          handleSecondaryEmailToggle={handleSecondaryEmailToggleFn}
          retrieveInputData={retrieveInputDataFn}
          handleDelete={handleDeleteFn}
          handleSubmitContact={handleSubmitContactFn} />);
    });
  });

So, in my test result it shows the line where the statement for conditional rendering is defined is not tested. So, how do I test the conditional rendering?

score 11 · Accepted Answer · answered Nov 19 '18 at 07:44

11

You could create two different test cases passing props to your component. For instance:

const yourProps = {
    email: {
      primary: {
         isPending: true // create test cases passing a different value
      },

    },
  }

  const component = mount(<YourComponent {...yourProps} />)

answered Nov 19 '18 at 07:44

GibboK

71,848
143
435
658

@pranami I am glad it helped you out! Happy coding! – GibboK Nov 20 '18 at 09:26
1

@pranami by the way, you could also consider adding a snapshot for this test case, example `expect(component).toMatchSnapshot()` – GibboK Nov 20 '18 at 09:27
I have already added a snapshot.Actually the component I am testing has a lot of child components, around 10-15 guess.So 1 doubt that I have which is: for now I have imported all the child components to my test file and trying to call the component inside the shallow/mount to call it, and that way I am seeing that the coverage is getting increased for each file. But I just want to confirm if this is the correct way.Can you please tell me if I am doing it right? – pranami Nov 20 '18 at 09:32
1

Also, I have functions inside my components which are like button clicks that changes the state and opens a dialog box, so how do I test those functions? – pranami Nov 20 '18 at 09:32
@pranami please create a new question and link it here thanks! – GibboK Nov 20 '18 at 10:48
Please find the link to my question : https://stackoverflow.com/questions/53390624/writing-test-cases-using-jest-and-enzyme – pranami Nov 20 '18 at 11:14
@GibboK How would a snapshot work if it has to match with the other case of the rendering. `expect(component).toMatchSnapshot()` would not match and may have to be updated. If that's the case, how would snapshots be version controlled? – Tarun Kolla Aug 06 '19 at 18:04
you need to create the snapshot first time with jest and save it (also on git) and do the comparison next time you test... more info here: https://jestjs.io/docs/en/snapshot-testing – GibboK Aug 07 '19 at 10:53

How to test conditional rendering of components using Jest and Enzyme

1 Answers1