在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

您正在向AggreageQty StationaryWaitTimeTotal StationaryRowCount 119 16:02:47.0000000 4 119 16:02:47.0000000 4 119 16:02:47.0000000 4 119 16:02:47.0000000 4 114 01:24:10.0000000 2 114 01:24:10.0000000 2 37 01:14:18.0000000 2 37 01:14:18.0000000 2 34 00:32:08.0000000 1 组件发送logoImage道具，但是组件实际上想要的是一个LogoJCpenney1道具（它将用作图片的logopath）。您不应在实际徽标图像中使用src的路径。您应该只将路径作为import道具。

之所以得到logopath是因为Expected string but received undefined实际上是logo.find("img").prop("src") ...，因为您没有为组件提供undefined道具。 / p>

也许是这样的：

logopath

---

根据您引用的其他StackOverflow帖子，您可能会想：“但我不只是要测试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); }); }); 的设置是否正确。我要测试src的实际显示img文件。”

我建议不要这样做。给定jcpenneylogo1.png时，无需测试<img>是否正确显示图像文件。那是React和您的浏览器已经处理过的第三方内容，测试这些内容不是您的工作。

由于您正在对src进行单元测试，因此只需确保通过LogoJCpenney1的道具LogoJCpenney1时，它将渲染logopath img等于src。