lundi 11 juin 2018

Is it possible to test Reactjs Component without render it?

In Physics simulation. I have to set data points in the 1st form. After that in the 2nd form. I will click and set the configuration on every breakpoints.
Totally. I have 2 forms. First form will set the number of points in the second form.

export const setBreakPointList = (numberOfBreakPoints) => {
  //This will be a state for component
  let tmp = [];
  for (let i = 1; i <= numberOfBreakPoints; i++) {
    tmp.push({
      title: stringifyNumber(i),
      breakPointNumber: i,
      content: <ParticleHeatForm breakPointNumber={i}/>
    })
  }
  return tmp;
};


export const ControlParametersReducer = (state = {
  numberOfBreakPoints: Number(NUMBER_OF_TIME_BREAK_POINTS_DEFAULT),
  maximumRunTime: Number(MAXIMUM_RUNTIME_DEFAULT),
  steps: setBreakPointList(Number(NUMBER_OF_TIME_BREAK_POINTS_DEFAULT))
}, action) => {
  switch (action.type) {
    case NUMBER_OF_BREAK_POINTS_CHANGED:
      return {
        numberOfBreakPoints: action.payload.value,
        maximumRunTime: state.maximumRunTime,
        steps: setBreakPointList(action.payload.value)
      };
    case MAXIMUM_RUNTIME_CHANGED:
      return {
        numberOfBreakPoints: state.numberOfBreakPoints,
        maximumRunTime: action.payload.value,
        steps: state.steps
      };
    default:
      return state;
  }
};

test.js

it('ControlParametersReducer numberOfBreakPoints must change', () => {
  const stateBefore = {
    numberOfBreakPoints: Number(NUMBER_OF_TIME_BREAK_POINTS_DEFAULT),
    maximumRunTime: Number(MAXIMUM_RUNTIME_DEFAULT),
    steps: setBreakPointList(Number(NUMBER_OF_TIME_BREAK_POINTS_DEFAULT))
  };
  const stateAfter = {
    numberOfBreakPoints: 10,
    maximumRunTime: Number(MAXIMUM_RUNTIME_DEFAULT),
    steps: setBreakPointList(Number(NUMBER_OF_TIME_BREAK_POINTS_DEFAULT))
  };
  const action = {
    type: NUMBER_OF_BREAK_POINTS_CHANGED,
    payload: {value: 10}
  };

  deepFreeze(stateBefore);
  deepFreeze(stateAfter);

  expect(
    ControlParametersReducer(stateBefore, action)
  ).toEqual(stateAfter);
});

I am aware that reducer must be a functional. Therefore I follow deepFreeze like tutorial

I have read this and this. Seems like I need to render them first.

Question:
Do I really need to render my component first and then do assertion?

Aucun commentaire:

Enregistrer un commentaire