How to test functions inside functional component and also using hooks values
还没有人认领这个 Issue。
评估
- 难度
- 4/5
- 预计耗时
- 3-5 天
- 新手友好度
- 25/100
- Issue 类型
- 文档
- 描述清晰度
- 需要澄清
- 活跃度
- 停滞
- 技术栈
- react, typescript
调研方向
示例位于 Employee.tsx 中，并涉及 useEmployeeDetails、useEmployeeData 和 useCleanData，但没有指定 repository 测试或源代码路径。首先定位这些 hook 和 Employee 组件，然后确定更新按钮触发的用户可见行为。在确定工作范围之前，需要明确具体的预期结果和测试位置。
由索引模型根据 Issue 内容生成。
描述
Hello
I will try to explain the case in the simplest way that I could:
I have a component: Employee.tsx
It has a pseudo code like this:
const Employee = () => {
const { name, status } = useEmployeeDetails();
const { updateEmployeeInfo } = useEmployeeData(();
const { clearStorage} = useCleanData();
const generalUpdate = async() => {
await updateEmployeeInfo(name, status);
clearStorage();
}
return(
<>
<span>update</update>
<button onClick={generalUpdate}></button>
</>
)
}
I am trying to write a test for 'generalUpdate' function that contains async function (updateEmployeeInfo) that is using hooks data as parameters, also I want to have a way how to access or spy on this function to be able to manipulate it and test different scenarios.
So :
1- How to access a function inside a functional component.
2- how to mock this function, especially if it is using another async function in its implementation?
Basically testing a function that is using data from hooks (or using async function inside it) and it exists inside a functional component
I hope my explanation is clear 😄
- 主要语言
- JavaScript
- 星标
- 19.7k
- 派生
- 1.2k
- PR 合并指标
- 30 天内没有已合并 PR
环境准备
- 没有 Dockerfile 或 Docker Compose 文件
- 有 Pull Request 模板
- 阅读贡献指南
从这里开始
- 先读完整个 Issue，再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库，在一个分支上完成修改。
- 提交 Pull Request，并在描述里引用这个 Issue 编号。
testing-library/react-testing-library 的其他 Issue
-
fireEvent.select does not wrap its automatic native focus in act可能已有人在做 @sergioperezcheco 于 5 天前认领。 未关闭
难度 2/5 1-3 小时 新手友好度 88/100
-
bug: calling configure() without reactStrictMode resets it to undefined, silently disabling strict mode可能重新可做 @suhailopensource 于 75 天前认领，目前没有进行中的 PR。 未关闭
难度 2/5 1-3 小时 新手友好度 35/100
testing-library/react-testing-library#1466 · 1 条评论 ·
-
难度 4/5 3-5 天 新手友好度 30/100
testing-library/react-testing-library#1459 · 2 条评论 ·
-
perf: optimize container lookup with early exit可能重新可做 @Ch-Abhinav-Chowdary 于 301 天前认领，目前没有进行中的 PR。 未关闭
难度 1/5 1 小时以内 新手友好度 35/100
testing-library/react-testing-library#1430 · 1 条评论 ·
-
`fireEvent.mouseEnter` does not forward `relatedTarget` (relatedTarget is the window instead)可能已有人在做 @swarnim02 于 318 天前认领。 未关闭
难度 3/5 1-2 天 新手友好度 55/100
查看 testing-library/react-testing-library 的全部 Issue
相似的 Issue
-
bug
难度 2/5 1-3 小时 新手友好度 72/100
jaegertracing/jaeger-ui#4596 ·
维护者通常 1 天内回复
-
channels:add check:passed
难度 1/5 1 小时以内 新手友好度 72/100
维护者通常 9 天内回复
-
module: core
难度 2/5 1-3 小时 新手友好度 77/100
bigbluebutton/bigbluebutton#26028 ·
维护者通常 1 天内回复
-
难度 1/5 1 小时以内 新手友好度 91/100
twbs/bootstrap#43050 · 1 条评论 ·
维护者通常 1 天内回复
-
status:untriaged
难度 1/5 1 小时以内 新手友好度 78/100
midnightntwrk/servicedesk#248 ·
维护者通常 1 天内回复