Создание тестовых случаев в Jest для рендера

Question

У меня есть следующий код для тестирования в React

render() {
    if (this.state.isDone) {
      return(...)
    } else {
      return(...)
    }
}

В приведенном выше коде мне нужно проверить оба условия.Однако при выполнении приведенного ниже теста тестируется одна ветвь.

it('renderTest', () => {
    const wrapper = shallow(<CheckState />);
    expect(wrapper.exists()).toBe(true);
});

В приведенном выше коде в тесте рассматривается только остальная часть.Параметр в этом назначается во время процесса компонента.Могу ли я проверить это, передав параметр?

Answer 1

Вы можете использовать setState метод enzyme для изменения состояния вашего компонента.Ниже приведено решение только для тестирования метода render независимо без simulate события.

index.tsx:

import React from 'react';

interface ICheckStateState {
  isDone: boolean;
}

export class CheckState extends React.Component<{}, ICheckStateState> {
  constructor(props) {
    super(props);
    this.state = {
      isDone: false
    };
  }

  public render() {
    if (this.state.isDone) {
      return <div>Done</div>;
    } else {
      return <div>Not Done</div>;
    }
  }
}

index.spec.tsx:

import React from 'react';
import { shallow, ShallowWrapper } from 'enzyme';
import { CheckState } from './';

describe('CheckState', () => {
  describe('#render', () => {
    let wrapper: ShallowWrapper;
    beforeEach(() => {
      wrapper = shallow(<CheckState></CheckState>);
    });
    it('should render correctly', () => {
      expect(wrapper.exists()).toBe(true);
      expect(wrapper.text()).toBe('Not Done');
      wrapper.setState({ isDone: true });
      expect(wrapper.text()).toBe('Done');
    });
  });
});

Результат модульного теста со 100% покрытием:

 PASS  src/stackoverflow/58059957/index.spec.tsx
  CheckState
    #render
      ✓ should render correctly (8ms)

-----------|----------|----------|----------|----------|-------------------|
File       |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
-----------|----------|----------|----------|----------|-------------------|
All files  |      100 |      100 |      100 |      100 |                   |
 index.tsx |      100 |      100 |      100 |      100 |                   |
-----------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        2.819s, estimated 6s

Answer 2

Да, мы можем сделать это, если мы изменим состояние внутри компонента, чтобы оно соответствовало определенному значению из props, и если ничего не передано из свойства prop, тогда задайте значение по умолчанию, что-то вроде этого:

class CheckState extends Component {
    constructor(props){
        this.state = {
            isDone: props.isDone || false
        };
    }
.......

Также контрольный пример должен быть примерно таким: -

it('renderTest', () => {
    const wrapper = shallow(<CheckState />);
    expect(wrapper.exists()).toBe(true);
    const wrapper = shallow(<CheckState isDone={true}/>);
    expect(wrapper.exists()).toBe(true);

});