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

Я пытаюсь проверить манипулирование состоянием следующего метода в классе/компоненте 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() });

reactjs jestjs enzyme
person Sean D    schedule 14.02.2019    source источник

Ответы (1)


arrow_upward
-1
arrow_downward

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

person Jezpoz    schedule 14.02.2019
comment
вы правы, я обновил его. Я все еще получаю ту же ошибку: TypeError: shallowDataSection.instance(...).props is not a function - person Sean D; 14.02.2019
comment
Вы пробовали использовать mount(...) вместо shallow(...) из фермента? Это позволит использовать .setProps({...}) и .setState({...}); - person Jezpoz; 14.02.2019
comment
Требуется крепление для доступа к состоянию/реквизиту? сейчас попробую - person Sean D; 14.02.2019
comment
Нашел этот вопрос на github, который объясняет, что делает мелкое. - person Jezpoz; 14.02.2019