Реакция: Невозможно получить доступ и проверить реквизиты и состояние во время поверхностного рендеринга Jest / Enzyme

Question

Я пытаюсь проверить манипуляции с состоянием следующего метода в классе / компоненте React.js:

// DataSection.jsx
export default class DataSection extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      initialFetch : true,
      REPORT_OPTION : 'totals',
      viewMarker : 0,
    };
  }


    updateViewMarker = (incrementSize, plusMinusOption) => {
let {viewMarker} = this.state;
console.log(this.props, `=====this.props inside updateViewMarker=====`);
const {preparedReportData} = this.props;

// safe string to math translation
if (plusMinusOption === '-') {
  this.setState({
    viewMarker : viewMarker - incrementSize
  })
} else if (plusMinusOption === '+') {
  this.setState({
    viewMarker : viewMarker + incrementSize
  })
}

Я новичок в Enzyme, и у меня возникают проблемы с доступом к обновлениям состояния.Я подумал, что проблема может быть связана с экземпляром, поэтому я включил несколько попыток с помощью .instance () и полученных ошибок.

// DataSection.test.jsx

// component shallow render with dud props
const mockProp = jest.fn();
const shallowDataSection = enzyme.shallow(<DataSection
  dispatchGetDonationData={ mockProp }
  rawReportData={ mockProp }
  preparedReportData={ mockProp }
  dispatchUpdatePreparedReportData={ mockProp }
/>);

test('increments by 10', () => {
    expect(shallowDataSection.instance()).toBeInstanceOf(DataSection); // passes
    expect(shallowDataSection.state().viewMarker).toEqual(0); // passes
    // expect(shallowDataSection.instance().state().viewMarker).toEqual(0); // fails

    shallowDataSection.setProps({
      preparedReportData : [1,1,1,1,1,1,1,1,1,1,1,1]
    }); 
    // shallowDataSection.instance().setProps({
    //   preparedReportData : [1,1,1,1,1,1,1,1,1,1,1,1]
    // }); // setProps is not a function


    expect(shallowDataSection.props().preparedReportData.length).toEqual(12); // can't read property 'length' of undefined
    // expect(shallowDataSection.instance().props().preparedReportData.length).toEqual(12); // shallowDataSection.instance(...).props is not a function

  });

В чем заключается ошибка?Приведенный ниже код является моим настоящим тестом, но я изо всех сил пытаюсь получить необходимые условия для работы

// dataSection.instance().updateViewMarker(10, '+');
// expect(shallowDataSection.state().viewMarker).toEqual(20);

РЕДАКТИРОВАТЬ: используемые библиотеки:

"enzyme": "^3.8.0",
"enzyme-adapter-react-16": "^1.9.1",
"jest-environment-enzyme": "^7.0.1",
"jest-enzyme": "^7.0.1",
"react": "^16.7.0",

Импорт в DataSection.test.js:

const React = require("react"); 
const App = require("../App");
const DataSection = require("../components/DataSection").default;
const dataSection = new DataSection();
const enzyme = require("enzyme");
const Adapter = require("enzyme-adapter-react-16");

enzyme.configure({ adapter : new Adapter() });

Answer 1

Не похоже, что вы устанавливаете состояние обновления после увеличения.Причина, по которой тест для подтверждения этого состояния равен 0, потому что он не определен при первоначальной визуализации компонента?