问题标签 [react-hooks-testing-library]

我在 React 中使用 Firebase 身份验证，并尝试使用react-hooks-testing-library. 我编写的代码正在运行。但是当我尝试测试时，react-hooks-testing-library我得到了这个错误：

FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created ，调用 Firebase App.initializeApp() (app/no-app)。

这是我的实际代码：

使用Auth.tsx

在这个钩子里面会有 3 个项目，其中user, loginWithEmailPassword,signUpWithEmailPassword

这是我的测试

使用Auth.test.tsx

因此，当我触发该loginWithEmailPassword(email,password)功能时，它一直显示No Firebase App error. 但是在我的项目中，我已经有了这个文件，它已经初始化了 Firebase 应用程序。

./initFirebase.tsx，这里已经初始化了应用程序，并调用了它index.tsx

所以错误只发生在测试中，所以我认为我应该模拟该initializeApp函数并在测试中的某个地方调用它。但我不知道该怎么做。

我刚开始在testing现场。请有经验的人帮忙。

这是问题：

1. 我的代码和测试发生了什么导致错误发生？

2. 我应该怎么做才能解决这个错误？

先感谢您。

我使用 Firebase 身份验证，我想使用 Jest 和 react-hooks-testing-library 测试该功能。

我有一个这样的功能：

该signInWithEmailPassword()函数有一个then()和catch()块。

我用这段代码模拟了这个函数：

然后我用react-hooks-testing-library这样的方法测试上面的函数：

然后我的测试因此错误而失败：

如果我删除then块，测试通过。但是如果我使用调用then()函数它会得到错误。我检查了我的模拟signInWithEmailAndPassword返回Promise.resolve()应该没问题，但它仍然有错误。

我是测试领域的新手。请有人对此提出一些建议并告诉我我的测试有什么问题？我完全不知道

在寻找这个答案之后，我试图像这样模拟它：

但仍然有同样的错误

我正在测试如下所示的自定义 React Hook。它的功能是获取图像的大小，然后使用提供的道具来计算用户想要的图像大小。

这是这个钩子的测试。它模拟了 Image 组件的 getSize 方法，还模拟了 React Native 的 useWindowDimension 钩子。

运行测试后，钩子中的控制台日志从 undefined 变为 { width: 200, height: 100 } 这是预期值，但是，测试中的控制台日志仍然未定义。我认为这种行为表明在测试期间，钩子的行为符合预期，只是由于某种原因，测试中钩子的当前值在新值可用后没有更新。

有谁知道如何解决这个问题？

我正在尝试使用@testing-library/react 测试使用useAsync挂钩的组件。

如果我在 TestAPI 模块上使用 jest.mock，然后是 getTest.mockResolvedValueOnce(testArray); 在 getTest 函数上，我希望模拟能够正确返回测试值。

测试 ：

要测试的组件：

API调用：

但是，如果我运行测试，则会引发异常，说明“elems.map”未定义。

仔细观察，elems 似乎是一个承诺。

有什么我做错了吗？

为什么解构需要waitFor？

代码沙盒

所有测试都做同样的事情。在我使用 renderHook的'ok.test.ts'result.current[1]文件中，我 用来设置状态并result.current[0]获取状态的值，到目前为止一切顺利。

在'not-ok'测试中，我会解构 renderHook 的结果并且测试失败，因为状态值不正确。

在“resolved.test.ts”中使用 waitFor 进行解构测试时有效。我知道设置状态是异步的。我不明白为什么'ok.test.ts'在没有waitFor 和没有解构的情况下工作，但如果我进行解构，我需要waitFor。

我有以下钩子，允许从AsyncStorage.

我正在尝试测试以下两件事

1. 挂钩值在 处初始化null，表示该值仍应从存储中检索，这发生在异步中。

为此，我进行了以下测试：

然而，这给了我一个错误 An update to TestComponent inside a test was not wrapped in act(...)，指的setValue是useEffect“安装时”发生的错误。我知道更改状态应该包含在一个act中，但是这在初始化钩子期间是异步发生的。处理此错误的正确方法是什么？

2. 使用以下测试将状态乐观地设置为新值：

这现在给了我错误： You called act(async () => ...) without await. This could lead to unexpected testing behaviour, interleaving multiple act calls and mixing their scopes. You should - await act(async () => ...);。然而，我将已经包裹act在一个await. 那么这里发生了什么，我怎样才能摆脱这个错误？

PS。测试成功完成，但出现上述错误。

我正在尝试测试一个使用 useEffect 和 setTimeout 的相对简单的自定义钩子。但是，我的测试失败了，我无法弄清楚出了什么问题。

这是钩子本身（useTokenExpirationCheck.ts）

和我的测试文件：

我所知道的是 exp 变量没有传递给 useTokenExpirationCheck 函数（console.log 在函数内部显示 0，当它被执行时）。所以基本上，我什至没有接触到 useEffect 本身......有什么想法会出错吗？

在advanced-hooks#async文档中有一个示例。

我对如何waitForNextUpdate工作感到困惑。我做了两个测试用例来比较waitForNextUpdate和act()+ jest.advanceTimersByTime()。

index.ts：

index.test.ts：

测试结果：

两个测试用例都通过了。我发现的唯一区别是，如果我增加setTimeoutto的延迟1000 * 10，使用的测试用例waitForNextUpdate将失败。

waitForNextUpdate那么和 和act()+有什么区别jest.advanceTimersByTime()？什么样的场景我只能使用waitForNextupdate而不是act()+ jest.advanceTimersByTime()？

包版本：

我正在尝试测试一个基本的 Axios 钩子并收到：

据我所知，预期的正在通过，但由于某种原因仍然出现此错误，导致测试失败。这是对下面的 package.json 做出本机反应。该钩子适用于我的应用程序，我假设它与测试库有关，但我不确定是什么。

我的 Axios 钩子：

我的测试：

问题

我创建了一个自定义的 React 钩子，其中包含fetch一个AbortSignal和一个 loading state。（我完全了解我可以使用的大量库，但这是针对企业应用程序的，这是此用例的最佳方法。）

钩子按预期工作。它允许我在需要时调用包装的 fetch（甚至传递给React-Query），我可以按需调用中止调用，并根据加载状态更新 UI。

我可以很容易地测试钩子的返回值、被包装的 fetch 的调用、中止信号的功能；但是，我在loading仅使用 jest 测试状态时遇到了很大的麻烦，并且react-hooks-testing-library. Component如果可以避免，我不想为此测试创建一个。

我希望能够调用包装的 fetch，并将加载状态视为 true，然后在解析后，将加载状态视为 false。目前，加载状态始终返回为 false。

use-wrapped-fetch.ts

对于这个钩子的内部状态，我已经尝试过useRef, useState, useReducer，并且我在测试任何一种方式时都遇到了同样的问题。我也useCallback完全删除了相同的结果。

use-wrapped-fetch.spec.ts

测试用于msw在服务工作者上启动模拟服务器。下面的测试在第一次期望时失败（返回false而不是期望true）。