反应测试ondom dom不更新?

时间:2019-09-18 09:15:48

标签: javascript reactjs jestjs

我正在尝试测试列表过滤器功能,如下所示:

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更改组件的状态。

我不知道为什么会这样,我尝试了不同的方法,但是都没有用。

1 个答案:

答案 0 :(得分:3)

您的inputonInput做出反应,但您正在触发onChange。我不相信有任何一种魔术可以将某件事转化为几近含义。

所以尝试

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