React-testing-library可以通过自定义挂钩呈现的文本测试

Question

在我的React应用程序中，我使用自定义挂钩从带翻译的JSON文件中检索本地化文本。它可以正常工作，但是每当我使用测试图书馆运行期望找到文本的测试时，就找不到文本，因为挂钩在拍摄该组件的快照时尚未触发和填充文本。我想知道是否有一种正确测试的方法？

// locales json file

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

//homepage.ts

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

// usegetLocalizedText自定义hook

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

//homepage.tsx

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

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

当我运行应用程序时，文本会正确显示，但是当我运行测试时，快照显示和空跨度，我会收到错误“ testinglibraryElementErmentErmenterror” ：无法找到文本的元素：资金移动模板。

//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>

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

Answer 1

我不知道customRender（）助手内部有什么，但我可以猜想您没有提供正确运行钩子所需的东西。

也许您需要模拟redux商店以提供initcomplete的正确价值？

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

Answer 2

您不应在测试中直接调用钩子。您应该使用renderhook为

示例

renderHook(() => useTheme())