單元測試因以下原因而失敗-對象作為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 })
}

我正在使用笑話/酶對其進行測試-

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，類型，鍵，ref，道具，_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>
    )
}