Тест Jest / Enzyme не дает ожидаемого результата?

Question

У меня есть простой компонент реакции, который я пытаюсь проверить с помощью фермента. Мне тест кажется тривиальным и должен пройти (просто проверяя наличие div):

import React, {Component} from 'react';
import uuid from 'uuid/v1';
import './styles.css';
import { connect } from 'react-redux';
import { saveCheckboxInput } from '../../actions/userInputActions';

class CheckboxSingle extends Component {

  constructor () {
    super();
    this.onChange = this.onChange.bind(this);
    this.state = {
      id : uuid(), // generate a unique id
    }
  }

  onChange(event) {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    this.props.saveCheckboxInput(this.props.linkId, value, this.props.desc, this.props.relatedLinkIds, this.props.stepNumber);
  }

  render(){
    return(
      <div className="col-sm-12 no-padding-left">
        <label className="checkbox-container label-text">{this.props.desc}
          <input id={this.state.id} type="checkbox" name="checkBoxValue" checked={this.props.isChecked}
      onChange={(e) => this.onChange(e)}/>
      <span className="checkmark"></span>
        </label>
      </div>
    )
  }
}

function mapStateToProps(state, ownProps) {
  // Tie checkBoxValue to store answer
  // Get answers in the context of checkbox (determines if checked or not)
  var stepAnswers = state.userInputState.stepResponses[ownProps.stepNumber];
  var isCheckedValue = null;
  // Note: only functional w/ one checkbox input in flow
  // TODO: make functional for multiple checkbox inputs in flow
  for(var i=0; i < stepAnswers.length; i++) {
    if(stepAnswers[i].type === "questionnaire-checkbox-input") {
      isCheckedValue = stepAnswers[i].value;
    }
  }
  return {
    isChecked : isCheckedValue
  };
}



export default connect(
  mapStateToProps,
  { saveCheckboxInput },
)(CheckboxSingle);

И тестовый файл:

import React from 'react';
import { shallow } from 'enzyme';
import { shallowToJson } from 'enzyme-to-json';
import configureStore from 'redux-mock-store'
import CheckboxSingle from './index';

describe('CheckboxSingle', () => {

  const initialState = {
    userInputState: {
      stepResponses: [
        {},
        {
          type: "questionnaire-checkbox-input",
          name: "mockLinkId",
          value: false,
          prefixText: "mockDesc",
          relatedLinkIds: ["mock1", "mock2"]
        }
      ]
    }
  }
  const mockStore = configureStore()
  let store, wrapper

  beforeEach(() => {
    store = mockStore(initialState)
    wrapper = shallow(<CheckboxSingle store={store} desc="mockDesc"
  linkId="mockLinkId" relatedLinkIds={["mock1", "mock2"]} stepNumber={1} />)
  });

  test('should render correctly', () => {
    expect(shallowToJson(wrapper)).toMatchSnapshot();
  });

  it('should render a styled <div /> around the Checkbox', () => {
    console.log(wrapper.debug());
    expect(wrapper.find('div').length).toEqual(1);
  });

});

Однако последний тест (проверка наличия div) не пройден, и я не могу понять, почему. Это выходные данные wrapper.debug () и wrapper.html ():

отладки:

 console.log src/components/CheckboxSingle/CheckboxSingle.test.js:37
  <CheckboxSingle store={{...}} desc="mockDesc" linkId="mockLinkId" relatedLinkIds={{...}} stepNumber={1} isChecked={{...}} saveCheckboxInput={[Function]} storeSubscription={{...}} />

html:

console.log src/components/CheckboxSingle/CheckboxSingle.test.js:37
  <div class="col-sm-12 no-padding-left"><label class="checkbox-container label-text">mockDesc<input type="checkbox" id="407fe100-b12c-11e8-9a4d-6d096301133b" name="checkBoxValue"/><span class="checkmark"></span></label></div>

Я новичок в энзиме, поэтому любые знания будут оценены!

Неудачный тестовый вывод:

  ● CheckboxSingle › should render a styled <div /> around the Checkbox

expect(received).toEqual(expected)

Expected value to equal:
  1
Received:
  0

  36 |   it('should render a styled <div /> around the Checkbox', () => {
  37 |     console.log(wrapper.html());
> 38 |     expect(wrapper.find('div').length).toEqual(1);
     |                                        ^
  39 |   });
  40 |
  41 | });

Answer 1

Я полагаю, тестовый пример ожидает установленного dom элемента. Но я вижу, что оболочка shallowRender. попробуйте обертку с mount, чтобы получить ожидаемый тестовый пример. Надеюсь, это поможет!