React 条件渲染组件测试用例 jest

Question

谁能帮我写一个使用 jest 和 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')}>}

Answer 1

对于条件渲染，你需要像

这样模拟状态

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);
});

最好有单独的测试用例。

React 条件渲染组件测试用例 jest

React conditional rendering component test cases jest

javascript

reactjs

jestjs

enzyme