用Jest测试React DOM

问题描述

我正在尝试使用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

}

解决方法

我发现我使用了错误的示波器。 通过简单地更改测试范围内的render函数，就可以了。

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);
  })