代码之家 › 专栏 › 技术社区 › intercoder

使用react测试库时找不到文本为“myText”的元素

react-testing-library jestjs reactjs

intercoder · 技术社区 · 7 年前

react-testing-library 有React和Jest,但我的一个测试失败了,我认为这与屏幕上的正则表达式有关 className prop

下面我附上了尊敬的测试和;组件文件。

还有,有没有办法 snapshot 使用此库进行测试?由于某种原因,我觉得我的考试没有完成。

// 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();

1 回复 | 直到 7 年前

Gio Polvara 7 年前

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

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

bar .

getByAltText getByTestId .

如果必须按类查找元素,该怎么办?在这些情况下,您可以使用 container 由 render 容器 只是一个DOM节点,所以您可以

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

请注意,您不必使用 toBeDefined() toBeInTheDocument() 哪个更地道。确保您安装了 jest-dom 第一

如何制作快照?同样,您可以使用 容器 . 在这种情况下,你想要第一个孩子。

expect(container.firstChild).toMatchSnapshot()