React conditional rendering component test cases jest

Question

Can anyone help me to write a test case for conditional rendering components using jest and enzyme?

{this.state.addingNewContent ?
          <AddContent
            contentId={this.state.contentId}
            added={this.addContentHandler}
            meta={option}
            closeAddContent={this.closeAddContent}
            assignedData={this.state[option.name]} />
          : <Lock
            lock={this.state.isLocked}
            lockedBy={this.state.lockedBy}
            clicked={() => this.toggleModal(true, 'lock')}>}

Sunil Kashyap · Accepted Answer · 2020-12-04 05:35:12Z

1

for conditional rendering, you need to mock state like

import AddContent from '../COMPONENT';
import Lock from '../COMPONENT'

it('should render AddContent component', () => {
  const wrapper = shallow(<MyComponent {...props} />);
  wrapper.setState({ addingNewContent: true });
  const component = wrapper.find(AddContent);
  expect(component.length).toBe(1);
});

it('should render Lock Component', () => {
  const wrapper = shallow(<MyComponent {...props} />);
  wrapper.setState({ addingNewContent: true });
  const component = wrapper.find(Lock);
  expect(component.length).toBe(1);
});

It's better to have separate test cases.

edited Dec 4, 2020 at 5:35

answered Dec 4, 2020 at 4:26

Sunil Kashyap

2,9842 gold badges17 silver badges33 bronze badges

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

6 Comments

Tarun Kumar Over a year ago

For the else case?

Tarun Kumar Over a year ago

i am getting error like this : expect(received).toBe(expected) Expected: 1 Received: 0

Sunil Kashyap Over a year ago

MyComponent is your class component name.

Tarun Kumar Over a year ago

I am still getting this error expect(received).toBe(expected) Expected: 1 Received: 0

Sunil Kashyap Over a year ago

could you add your state code of the class component

|

Collectives™ on Stack Overflow

React conditional rendering component test cases jest

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related