React: Няма достъп и тестване на подпори и състояние по време на плитко изобразяване на 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