react-testing-library 无法测试从自定义挂钩呈现的文本答案

【问题标题】：react-testing-library can't test for text rendered from a custom hookreact-testing-library 无法测试从自定义挂钩呈现的文本
【发布时间】：2022-07-15 16:57:28
【问题描述】：

在我的 react 应用程序中，我使用自定义挂钩从带有翻译的 JSON 文件中检索本地化文本。它工作正常，但是每当我使用 testing-library 运行期望找到文本的测试时，都找不到文本，因为在拍摄组件快照时钩子尚未触发并填充文本。我想知道是否有办法正确测试这个？

//语言环境 JSON 文件

      "LABELS": {
        "WELCOME": {
          "title": "Welcome"
        },
   }

//homepage.ts

const homePageText = [
  {
    variableName: "welcomeText",
    key: "LABELS.WELCOME.title",
    defaultValue: "Welcome",
  },

//使用GetLocalizedText自定义钩子

import { useMemo, useState } from "react"
import { useSelector } from "react-redux"
import translate from "@localization/translate"
import intl from "react-intl-universal"

export const useGetLocalizedText = (moduleName: string) => {
  const [messages, setMessages] = useState([])
;(async () => {
    const msgArray = await import(
      `@localization/modules/${moduleName}.ts`
    ).then((msgs) => msgs)
    setMessages(msgArray?.default ? msgArray.default : [])
  })()

  const initComplete: boolean = testInitComplete ? testInitComplete : useSelector(
    (state) => state.localization.initComplete
  )
  const localizedText = useMemo(() => {
    const localizedTextTemp: any = {}
    messages?.length > 0 &&
      messages.forEach((msg) => {
        localizedTextTemp[msg.variableName] = translate(
          intl,
          msg.key,
          initComplete,
          msg.defaultValue
        )
      })
    return localizedTextTemp
  }, [initComplete, messages])

  return localizedText
}

export default useGetLocalizedText

//主页.tsx

const HomePage = () => {
 const localizedText = useGetLocalizedText("homePage")

return (
  <div>
    <span> {localizedText.welcome} </span>
</div>
)
}

当我运行应用程序时，文本正确显示，但是当我运行测试时，快照显示和空白跨度，我收到错误“TestingLibraryElementError：无法找到带有文本的元素：资金移动模板。这可能是因为文本是由多个元素分解的。在这种情况下，你可以为你的文本匹配器提供一个函数，让你的匹配器更加灵活。”

//homepage-test.tsx

import React from "react"
import { customRender } from "../testUtils"
import { screen } from "@testing-library/react"
import HomePage from "@pages/home/"


describe("Home Page", () => {

  it("renders without crashing", () => {

    customRender(
      <HomePage/>
    )
    expect(screen.getByText("Welcome")).toBeInTheDocument()

  })

//快照

<div> <span> </span> <div>

所以我的问题是，有没有办法运行测试来找到此文本/创建快照以便文本存在？我知道我可以将硬编码文本作为道具传递给测试，但我认为这不是一个很好的解决方案。

【问题讨论】：

标签： reactjs localization react-testing-library react-custom-hooks

【解决方案1】：

我不知道 customRender() 助手里面有什么，但我猜你没有提供正确运行你的钩子所需的东西。

也许您需要模拟 Redux 存储以提供适当的 initComplete 值？

作为解决方案的一部分，我将使用@testing-library/react-hooks 来测试钩子本身，以及钩子是否可以工作，以及是否需要知道钩子是否在组件的上下文中工作，然后测试组件。如果钩子可以正确测试，但组件仍然会出现您提到的问题，那么发现错误会容易得多。

【讨论】：