О состоянии в реакции js фермента - PullRequest
Новая
       5

О состоянии в реакции js фермента

0 голосов
/ 04 марта 2020

Я пытаюсь создать тест для моего компонента Class. Я хочу проверить состояние моего компонента и сравнить значения состояния с полученным результатом. У меня есть компонент basi c, который показывает только всплывающую подсказку и показывает параметры в зависимости от значения состояния. Это простой компонент, подобный этому: 

import React, { Component } from 'react';
import './DotsTooltip.css';
import { translate } from 'react-i18next';

class DotsTooltipPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      optionsVisible: false,
      label: '',
    };
  }

  componentDidMount() {
//code here
  }


  render() {
    const { optionsVisible, label } = this.state;
    const { icon } = this.props;
    return (
      <div className="dots-tooltip-container">
My component content
      </div>
    );
  }
}

const DotsTooltip = translate('translations')(DotsTooltipPage);

export { DotsTooltip };

, поэтому у меня есть тест, подобный этому: 

import { DotsTooltip } from './DotsTooltip';
import React from 'react';
import { shallow } from 'enzyme';

const setup = (props = {}, state = null) => {
  const wrapper = shallow(<DotsTooltip {...props} />);
  if (state) wrapper.setState(state);
  return wrapper;
};

describe('DotsToolTip', () => {
  let wrapper;

  beforeEach(() => {
    wrapper = setup({ icon: null });
  });

  it('render', () => {
    expect(wrapper);
  });

  it('initial state should', () => {
    expect(wrapper.state().optionsVisible).toEqual(false);
  });
});

Тест не пройден и показывает мне эту ошибку: Невозможно прочитать свойство 'optionsVisible' из null

Я внимательно прочитал документацию по ферменту, но не знаю, почему это происходит.

1 Ответ

1 голос
/ 04 марта 2020

Вы должны использовать только состояние вместо state () и получить экземпляр компонента. 

import {shallow} from 'enzyme';

const component = shallow(<DotsTooltip />);
const instance = component.instance();
expect(instance.state.optionsVisible).toBe(false);
...