个人中心
gpt4 book ai didi

reactjs - 无法找到文本为 : "myText" error when using react-testing-library 的元素

转载 作者：行者123 更新时间：2023-12-03 13:29:56 25 4
gpt4 key购买 nike

我正在尝试将 react-testing-library 与 React 和 Jest 结合使用，但我的一个测试失败了，我认为这与 className 属性上的正则表达式有关 在测试文件上。

下面我附上了各自的测试和组件文件。

另外，有没有办法使用这个库进行快照测试？我觉得我的测试由于某种原因还没有完成。 

// Image.js Component


// @flow
import * as React from "react";
import styled from "styled-components";

const StyledImage = styled.img`
  max-width: ${props => props.imageWidth || 100}%;
`;

type Props = {
  imageAlt: string,
  imageSrc: string | boolean | Function,
  className?: string,
  StyledImage: React.Element<typeof StyledImage>
};

const Image = (props: Props) => {
  const { imageAlt, imageSrc, className } = props;
  return (
    <StyledImage
      {...props}
      className={className}
      src={imageSrc}
      alt={imageAlt}
    />
  );
};

export default Image;



// Image.test.js 


import React from "react";
import { render, cleanup } from "react-testing-library";
import Image from "../Image";

describe("<Image /> component", () => {
  afterEach(cleanup);

  describe("Component as a whole", () => {
    it("renders the image with a src, alt and a className ", () => {
      const testProps = {
        imageAlt: "some random string",
        imageSrc: "" /* [ASK]: How to test this */,
        className: "imageDescripton" /* [ASK]: How to test this */
      };

      const { getByAltText } = render(<Image {...testProps} />);
      const { getByText } = render(<Image {...testProps} />);

      const imageAltNode = getByAltText(testProps.imageAlt);
      const imageClassNameNode = getByText(`${testProps.className}`); // [FAIL]: Fails with error.  Unable to find an element with the text: imageDescripton. Regex problem?

      expect(imageAltNode).toBeDefined();
      expect(imageClassNameNode).toBeDefined();
    });
  });
});

完整的错误日志:

Unable to find an element with the text: imageDescripton. 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.

<body>
  <div>
    <img
      alt="some random string"
      class="imageDescripton Image__StyledImage-sc-1icad3x-0 judnkv"
      src=""
    />
  </div>
  <div>
    <img
      alt="some random string"
      class="imageDescripton Image__StyledImage-sc-1icad3x-0 judnkv"
      src=""
    />
  </div>
</body>

  18 |
  19 |       const imageAltNode = getByAltText(testProps.imageAlt);
> 20 |       const imageClassNameNode = getByText(`${testProps.className}`); // [FAIL]: Fails with error.  Unable to find an element with the text: imageDescripton. Regex problem?
     |                                  ^
  21 |
  22 |       expect(imageAltNode).toBeDefined();
  23 |       expect(imageClassNameNode).toBeDefined();

最佳答案

getByText 查找节点内的文本。所以在这个例子中:

<div class="foo">bar</div>

文本是bar。

getByAltText 是查找图像的最佳方式。另一种方法是使用 getByTestId。

如果您必须按类查找元素怎么办？在这些情况下，您可以使用由 render 返回的 container。 container 只是一个 DOM 节点，所以你可以这样做

const { container } = render(<MyComponent />)
container.querySelector('.my-class')

请注意，您不必使用 toBeDefined()，您可以使用更惯用的 toBeInTheDocument()。确保安装jest-dom首先。

<小时/>

如何制作快照？同样，您可以使用容器。在这种情况下，您想要第一个 child 。

expect(container.firstChild).toMatchSnapshot()

关于reactjs - 无法找到文本为 : "myText" error when using react-testing-library 的元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54593369/

25 4 0
文章推荐： github-api - 通过 GitHub API 更新 GitHub 项目 wiki
文章推荐： vb.net - VB.NET“如果”运算符会导致装箱吗？
文章推荐： opengl - 高效GLSL代码的技巧
文章推荐： reactjs - 在高阶组件中使用钩子(Hook)
行者123
个人简介

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

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