个人中心
gpt4 book ai didi

reactjs - react-testing-library:测试评估发生得太早

转载 作者：行者123 更新时间：2023-12-04 14:54:15 24 4
gpt4 key购买 nike

我想测试货币兑换列表项的 React 功能组件。该组件还应显示旗帜图像和货币代码。 UI 从组件的 Prop (currencyCode) 获取货币代码，从状态切片 (imgAlt) 获取图像替代文本。

See the UI here

组件:

import React from "react";
import { useSelector } from "react-redux";
import classes from "./FXPair.module.css";

const FXPair = ({ currencyCode }) => {
  const fxPair = Object.values(useSelector((state) => state.fxPairs)).filter((pair) => pair.currency === currencyCode)[0];
  const [fXRate, setFXRate] = React.useState(1.0);
  const [flagImgSrc, setFlagImgSrc] = React.useState("");
  const [imgAlt, setImgAlt] = React.useState("");

  React.useEffect(() => {
    if (fxPair !== undefined) {
      (async function fetchImg() {
        await import(`../../flags/${fxPair.currency.slice(0, 2).toLowerCase()}.png`).then((image) => {
          setImgAlt(`${fxPair.currency.slice(0, 2).toLowerCase()}-flag`);
          setFlagImgSrc(image.default);
        });
      })();
      setFXRate(fxPair.exchangeRate.middle);
    }
  }, [fxPair, flagImgSrc, imgAlt, fXRate]);

  return (
    <div className={classes.FXPair}>
      <img src={flagImgSrc} alt={imgAlt} />
      <p className={classes.CurrencyToBuy}>{currencyCode}</p>
      <p className={classes.fXRate}>EUR {(1 / fXRate).toFixed(3)}</p>
    </div>
  );
};

export default FXPair;

当通过下面的测试测试组件时，我想确保显示正确的标志图像替代文本和货币代码。但是，测试评估不起作用。我尝试在每个测试中使用不同的方法，但没有一个能完成这项工作。

测试:

import { render, screen, waitFor } from "@testing-library/react";
import ProviderWrapper from "../../testUtils/ProviderWrapper";
import FXPair from "./FXPair";

test("Flag gets displayed for the currency-related country", async () => {
  render(
    <ProviderWrapper>
      <FXPair currency={"HUF"} />
    </ProviderWrapper>
  );

  await waitFor(() => {
    screen.getByAltText("hu-flag");
  });
  expect(screen.getByAltText("hu-flag")).toBeInTheDocument();
});

test("Currency code gets displayed", async () => {
  const currencyCode = "HUF";
  render(
    <ProviderWrapper>
      <FXPair currency={currencyCode} />
    </ProviderWrapper>
  );

  const items = await screen.findByText(/HUF/);
  expect(items.getByText(/HUF/)).toBeInTheDocument();
});

测试结果:您可以看到我为 Prop currencyCode 传入的值“HUF”(匈牙利福林)没有被考虑在内。此外，测试不会等待状态切片 imgAlt，而是根据该切片的初始值进行评估。

  ● Flag gets displayed for the currency-related country

    Unable to find an element with the alt text: hu-flag

    Ignored nodes: comments, <script />, <style />
    <body>
      <div>
        <div
          class="FXPair"
        >
          <img
            alt=""
            src=""
          />
          <p
            class="CurrencyToBuy"
          />
          <p
            class="fXRate"
          >
            EUR 
            1.000
          </p>
        </div>
      </div>
    </body>

      10 |   );
      11 |
    > 12 |   await waitFor(() => {
         |         ^
      13 |     screen.getByAltText("hu-flag");
      14 |   });
      15 |   expect(screen.getByAltText("hu-flag")).toBeInTheDocument();

      at waitForWrapper (node_modules/@testing-library/dom/dist/wait-for.js:175:27)
      at Object.<anonymous> (src/components/FXPair/FXPair.test.jsx:12:9)

  ● Currency code gets displayed

    Unable to find an element with the text: /HUF/. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

    Ignored nodes: comments, <script />, <style />
    <body>
      <div>
        <div
          class="FXPair"
        >
          <img
            alt=""
            src=""
          />
          <p
            class="CurrencyToBuy"
          />
          <p
            class="fXRate"
          >
            EUR 
            1.000
          </p>
        </div>
      </div>
    </body>

      24 |   );
      25 |
    > 26 |   const items = await screen.findByText(/HUF/);
         |                              ^
      27 |   expect(items.getByText(/HUF/)).toBeInTheDocument();
      28 | });
      29 |

      at waitForWrapper (node_modules/@testing-library/dom/dist/wait-for.js:175:27)
      at findByText (node_modules/@testing-library/dom/dist/query-helpers.js:101:33)
      at Object.<anonymous> (src/components/FXPair/FXPair.test.jsx:26:30)

最佳答案

尝试使用 findBy 而不是 getBy 进行第一次检查。这将返回一个等待 1000 毫秒(默认情况下)找到元素的 promise ，如果它仍然找不到它，那么它将失败。

  await waitFor(() => {
    screen.findByAltText("hu-flag");
  });
  expect(screen.getByAltText("hu-flag")).toBeInTheDocument();

在我的测试中，我经常先使用 findBy，然后在所有测试中使用 getBy。

关于reactjs - react-testing-library:测试评估发生得太早，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/68432894/

24 4 0
文章推荐： javascript - 如何使用 sinon stub aws s3 上传
文章推荐： reactjs - Nginx 反向代理多个 React 应用
文章推荐： shiny - 图片不会出现在 Shiny App 的 www 文件夹中
文章推荐： r - 过滤具有相同行名和列名的 data.frame
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com