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?

GibboK · Accepted Answer · 2018-11-19 07:44:15Z

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, 2018 at 7:44

GibboK

74.3k149 gold badges453 silver badges676 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

GibboK Over a year ago

@pranami I am glad it helped you out! Happy coding!

GibboK Over a year ago

@pranami by the way, you could also consider adding a snapshot for this test case, example expect(component).toMatchSnapshot()

pranami Over a year ago

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 Over a year ago

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?

GibboK Over a year ago

@pranami please create a new question and link it here thanks!

|

Collectives™ on Stack Overflow

How to test conditional rendering of components using Jest and Enzyme

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related