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

aij0ehis  于 2022-12-28  发布在  Jest
关注(0)|答案(1)|浏览(170)
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>
  );
}

如何测试返回完整jsx的嵌套函数,并且该函数是在jsx本身中调用的。

yqkkidmi

yqkkidmi1#

不要使用嵌套函数,而是将函数移到函数App之外。将其声明为“一等公民”,作为您导出的函数。

依赖注入你的函数需要什么都应该作为参数传递。

现在,您可以作为一个独立的单元测试您的功能。

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

相关问题