React test onchange dom不更新？

Question

我正在尝试以如下方式测试列表过滤器功能：

it("should filter the correct champions", () => {

    const container = document.createElement("div");

    document.body.appendChild(container);

    act(() => {

      render(

        <Router>

          <ChampionList />

        </Router>,

        container

      );

    });

    const championListPre = container.querySelectorAll("tr");

    expect(championListPre.length).toBeGreaterThan(1);

    const search = container.querySelector("input");

    act(() => {

      fireEvent.change(search, { target: { value: "aatrox" } });

    });

    expect(search.value).toBe("aatrox");

    const championListPost = container.querySelectorAll("tr");

    expect(championListPost.length).toBe(1); // This will not be > 1

    unmountComponentAtNode(container);

    container.remove();

  });

但是，由于某种原因，react 不会重新渲染列表（我的猜测）并且expect(championListPost.length).toBe(1);永远不会是真的。

输入如下所示：

<input

   className="input"

   type="text"

   placeholder="Champion name"

   value={this.searchValue}

   onInput={this.handleChange}

/>

handleChange 改变组件的状态。

我不知道为什么会发生这种情况，我尝试了不同的方法，但都没有奏效。

Answer 1

你的input反应，onInput但你正在触发onChange。我不相信有任何魔法可以将某个事件转化为几个意义相近的事件。所以试试&nbsp;&nbsp;fireEvent.input(search,&nbsp;{&nbsp;target:&nbsp;{&nbsp;value:&nbsp;"aatrox"&nbsp;}&nbsp;});