用 Jest 测试 React DOM答案

【问题标题】：Testing React DOM with Jest用 Jest 测试 React DOM
【发布时间】：2020-12-15 20:03:57
【问题描述】：

我正在尝试使用 Jest 进行此测试，但我没有找到如何为 document.querySelect() 函数实现测试，这就是我可以用它走多远：

describe("Ui manipulation and scans", () =>{
  render(
    <Provider store={Store}>
      <InputData />
    </Provider>
  
  )


  it("get all inputs",() => {
    expect(getAllInputs()).toHaveLength(5);
  })
  it("search warning",() => {
    const arr = getAllInputs()
    expect(searchWarning(arr)).toBe(false);
  })

})

这里是 getAllInputs 函数：

export function getAllInputs () {
  const inputs = document.querySelectorAll('input');
  var arr = [];
  for(var i = inputs.length; i--; arr.unshift(inputs[i]));
  return arr

}

【问题讨论】：

react-testing-library 为您提供现成的查询，查看文档testing-library.com/docs/dom-testing-library/…
我确实阅读了有关查询的内容并看到了一堆示例，但是我的函数假设是执行查询工作，我不知道如何设置该函数，因为它在组件内部被调用。

标签： reactjs jestjs react-testing-library

【解决方案1】：

我发现我使用了错误的示波器。通过简单地更改测试工作范围内的渲染函数。

describe("Ui manipulation and scans", () =>{

  it("get all inputs",() => {
    render(
      <Provider store={Store}>
        <InputData />
      </Provider>
    )

    expect(getAllInputs()).toHaveLength(5);
  })
  it("search warning",() => {
    const {getAllByRole} = render(
      <Provider store={Store}>
        <InputData />
      </Provider>
    )
    
    expect(searchWarning(getAllByRole("textbox"))).toBe(false);
  })

【讨论】：