I have a conditional rendering block in my React ponent 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 ponent', () => {
        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?

I have a conditional rendering block in my React ponent 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 ponent', () => {
        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?

• javascript
• reactjs
• jestjs
• enzyme

1 Answer 1

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

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

    },
  }

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