在 React Jest 中测试徽标组件

Question

我有一个相同的要求 Jest + Enzyme: How to test an image src?

我想测试仅包含图像“logo.png”的徽标组件。我试过thierno回答的解决方案。

标志组件

import React from 'react';
import PropTypes from 'prop-types';
export default function LogoJCpenney1({ logopath, logowidth }) {         
    return (
        <img src={logopath} alt="logo" width={logowidth} className="logoOriginal"/>
    );
}
LogoJCpenney1.propTypes = { 
    /** original logo path of JCPenney */
    logowidth: PropTypes.string
};
LogoJCpenney1.defaultProps = {  
    className:"logoOriginal"    
};

测试组件

import React from 'react';
import {configure, shallow} from 'enzyme';
import LogoJCpenney1 from '../LogoJCpenney1/LogoJCpenney1';
import Adapter from 'enzyme-adapter-react-16';
configure({adapter:new Adapter()});

import logoImage from "./../../containers/assets/img/jcpenneylogo1.png";
describe("<LogoJCpenney1 />", () => {
    it("renders an image", () => {
        const logo = shallow(<LogoJCpenney1 logoImage={logoImage} logowidth="50" />);
        expect(logo.find("img").prop("src")).toEqual(logoImage);
    });
});

测试结果

感谢任何帮助。

Answer 1

您正在向您的LogoJCpenney1 组件发送一个logoImage 属性，但组件实际上 想要的是一个logopath 属性（它将用作图像的src）。您不应在实际徽标图像中使用import 的路径。您应该将路径作为 logopath 属性传递。

您获得Expected string but received undefined 的原因是因为logo.find("img").prop("src") 实际上是undefined...因为您没有为您的组件提供logopath 属性。

大概是这样的：

import React from 'react';
import { configure, shallow } from 'enzyme';
import LogoJCpenney1 from '../LogoJCpenney1/LogoJCpenney1';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });

const logopath = "../../containers/assets/img/jcpenneylogo1.png";

describe("<LogoJCpenney1 />", () => {
  it("renders an image", () => {
    const logo = shallow(<LogoJCpenney1 logopath={logopath} logowidth="50" />);
    expect(logo.find("img").prop("src")).toEqual(logopath);
  });
});

---

根据您引用的其他 StackOverflow 帖子，您可能会想，“但我不只是想测试 src 是否设置正确。我想测试 img 是否实际显示 jcpenneylogo1.png文件。”

我建议不要这样做。当给定src 时，您无需测试<img> 是否正确显示图像文件。这是 React 和您的浏览器已经处理好的第三方东西，测试这些东西不是您的工作。

由于您正在对LogoJCpenney1 进行单元测试，您只需确保当您传递LogoJCpenney1 一个名为logopath 的道具时，它会呈现一个img，其中src 等于logopath.