Модульное тестирование не удалось из-за - Объекты недопустимы как дочерний элемент React

Question

Ниже приведен мой код, в котором я тестирую mytestFunc Вызван флажок проверенного состояния.

Флажок - <input id="mycheck" type="checkbox" onClick={this.mytestFunc} />

mytestFunc функция -

mytestFunc = e => {
    const mockdata = this.state.myList
    const newArr = mockdata.map(x => e.target.checked ? {
      ...x, checked: (<label className="label">
        <input type="checkbox" />
        <span className="checkbox" />
      </label>)
    } : {
        ...x, checked: (<label className="label">
        <input type="checkbox" />
        <span className="checkbox" />
      </label>) })
    this.setState({ myList: newArr })
}

, и я тестирую его, используя jest / энзим -

it('test mytestFunc function', () => {
    const component = mount(<MyComponent {...props} />);
    const customEvent = {
      "target": {
        "checked": true
      }
    }
    const dataList = [
      {
        "id": "DS64XX123",
        "name": "test",
        "gender": "male"
    ]
    component.setState({ myList: dataList });
    component.instance().mytestFunc(customEvent);
    expect(component.state().myList).toBe(true);
  })

Ошибка -

Инвариантное нарушение: объекты недопустимы как дочерний элемент React (найдено:объект с ключами {$$ typeof, type, key, ref, props, _owner, _store}).Если вы намеревались визуализировать коллекцию дочерних элементов, используйте вместо этого массив.

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

Answer 1

Вы пытаетесь визуализировать

{
    ...x, checked: (<label className="label">
    <input type="checkbox" />
    <span className="checkbox" />
  </label>)
}

Что должно быть чем-то вроде

{
    x.map(y => (
        <label>
            <input type="checkbox" />
            <span className="checkbox" />
        </label>
    )
}