如何使用 jest 和 react 测试库为返回 function 的嵌套 jsx 编写测试用例

Question

export default function App() {
  let arr = [{name:"a"},{name:"b"},{name:"c"},{name:"d"},{name:"e"},{name:"f"}]

  let **renderFn** = () => {
    return arr.map(a=>{
      return <div>{a.name}</div>
    })
  }
  return (
    <div className="App">
      <div>{renderFn()}</div>
    </div>
  );
}

How to test test nested function that returns a complete jsx and that function is invoked in the jsx itself. I am unable to write test

Answer 1

Do not use a nested function, instead move your function outside of the function App. Declare it as a "First-class citizen", as a function that you export.

Dependency injection what ever your function needs should be passed as arguments.

Now you can test your function as a stand alone unit.

export function List({ list }) {
    return list.map(a => {
        return <div>{a.name}</div>
    })
}  
export default function App() {
    let arr = [{ name: "a" }, { name: "b" }, { name: "c" }, { name: "d" }, { name: "e" }, { name: "f" }]
    return (
        <div className="App">
            <div><List list={arr} /></div>
        </div>
    );
}