Тестирование заявления IF относительно состояния с помощью Enzyme & Jest не работает

Question

Я пытаюсь протестировать этот метод, который отвечает за редактирование, но может использовать строки, которые заменяют старое название и старое тело новыми заголовком и телом.

Это находится в разделе IF.Ниже приведен код, который реализует редактирование:

onEditNote = event => {
  const {
    target: { value: id }
  } = event;
  const obj = {
    title: this.state.title,
    body: this.state.body
  };

  // clear the errors while submitting

  this.setState({ titleError: "", bodyError: "" });

  if (obj.title === "") {
    this.setState({ titleError: "Title empty, please add title" });
  } else if (obj.body === "") {
    this.setState({ bodyError: "Body empty, please add body" });
  } else if (obj.title.length > 20) {
    this.setState({ titleError: "Title is too long." });
  } else {
    this.setState(state => {
      const list = state.notesArray.map(item => {
        if (item.id === id) {
          // eslint-disable-next-line no-param-reassign
          item.title = obj.title;
          // eslint-disable-next-line no-param-reassign
          item.body = obj.body;
        }
        return item;
      });

      localStorage.setItem("items", JSON.stringify(list));

      // eslint-disable-next-line no-undef
      $("#editModal").modal("close");
      this.onSuccessToast("Noted edited successfully.");
      return {
        list,
        title: "",
        body: ""
      };
    });
  }
};

Это строки в приведенном выше коде, которые не охватываются тестом, который я реализовал:

if (item.id === id) {
  // eslint-disable-next-line no-param-reassign
  item.title = obj.title;
  // eslint-disable-next-line no-param-reassign
  item.body = obj.body;
}

И ниже мой тест IЯ реализую, который не охватывает оператор IF, но я вижу, что охватил его:

it("should edit a Note.", () => {
  wrapper = shallow(<App />);
  $.fn.modal = jest.fn();
  wrapper.instance().onEditNote({ target: { value: "0" } });

  wrapper.instance().setState({
    title: "huxy 12",
    body: "hey huxy this is not great.",
    notesArray: [{ title: "hey", body: "its good", id: "0" }]
  });

  wrapper.instance().setState(state => {
    state.notesArray.map(item => {
      if (item.id === "0") {
        // eslint-disable-next-line no-param-reassign
        item.title = state.title;
        // eslint-disable-next-line no-param-reassign
        item.body = state.body;
      }
      return item;
    });
  });
});

Чего мне не хватает в моем тесте?

РЕДАКТИРОВАТЬ Этомой отредактированный тест с Jest Matchers , не работает.

it('should edit a Note.', () => {
    wrapper = shallow(<App />);
    $.fn.modal = jest.fn();
    wrapper.instance().onEditNote({ target: { value: '0' } });

    wrapper.instance().setState({
      title: 'huxy 12',
      body: 'hey huxy this is not great.',
      notesArray: [{ title: 'hey', body: 'its good', id: '0' }],
    });

    wrapper.instance().setState((state) => {
      state.notesArray.map((item) => {
        if (item.id === '0') {
          // eslint-disable-next-line no-param-reassign
          item.title = state.title;
          expect(item.title).toBe(state.title);
          expect(item.title).not.toBeNull();
          // eslint-disable-next-line no-param-reassign
          item.body = state.body;
        }
        return item;
      });
    });

    wrapper.instance().onEditNote({ target: { value: 0 } });
  });

Это полное состояние:

constructor(props) {
    super(props, props, props);
    this.state = {
      notesArray: [],
      id: '',
      title: '',
      body: '',
      search: '',
      titleDisplay: '',
      bodyDisplay: '',
      titleError: '',
      bodyError: '',
    };
    this.onHandleSubmit = this.onHandleSubmit.bind(this);
    this.onHandleChange = this.onHandleChange.bind(this);
  }

Answer 1

Утверждения не должны быть помещены в setState обратный вызов. setState должен вызываться на оболочке фермента, а не на экземпляре. Ветви должны быть проверены одна за другой, в зависимости от состояния ветви.

Это должно быть что-то вроде:

wrapper = shallow(<App />);
// mock $(...).modal and localStorage.setItem
wrapper.setState({ title: '' });
wrapper.instance().onEditNote({ target: { value: '0' } });
expect(wrapper.state.titleError).toEqual({ title: '', titleError: ... );

wrapper = shallow(<App />);
// mock $(...).modal and localStorage.setItem
wrapper.setState({ title: '' });
wrapper.instance().onEditNote({ target: { value: '0' } });
expect(wrapper.state.titleError).toEqual({ body '', bodyError: ... );

// etc.

Обычно глобалы не должны подвергаться насмешкам, присваивая jest.fn(), так как это может помешать их очистке, предпочтительным способом насмешки $(...).modal является jest.spy.

localStorage.setItem тоже надо издеваться.