我有一个徽标组件:
import React from "react";
import logo from "assets/images/logo.png";
const Logo = () => {
return <img style={{ width: 50 }} src={logo} alt="logo" />;
};
export default Logo;
测试文件:
import React from "react";
import Logo from "components/shared/Logo";
describe("<Logo />", () => {
it("renders an image", () => {
const logo = shallow(<Logo />);
expect(logo.find("img").prop("src")).toEqual("blahh");
});
});
但当我运行测试时,出现了一些奇怪的错误:
$ NODE_PATH=src jest
FAIL src/tests/Logo.test.js
● <Logo /> › renders an image
TypeError: val.entries is not a function
at printImmutableEntries (node_modules/expect/node_modules/pretty-format/build/plugins/immutable.js:44:5)
at Object.<anonymous>.exports.serialize (node_modules/expect/node_modules/pretty-format/build/plugins/immutable.js:178:12)
我应该如何测试图像源代码===“assets/images/logo.png”?
6条答案
按热度按时间g6baxovj1#
我假设您在Logo组件附近的
__test__
目录中编写测试。无论如何,导入与测试文件相关的“assets/images/logo.png”。
如果项目结构是这样
首先,就像我说的输入图像到您的logo.test.js:
11dmarpk2#
upd 2023.正如@tomhughes所指出的,Jest 28在模拟转换方面有不同的逻辑:www.example.comhttps://jestjs.io/docs/28.x/upgrading-to-jest28#transformer
由于某些原因,此信息没有清楚地突出显示。在"与wepack集成"部分,显示了如何使用
transform
自动模拟静态资产:如果moduleNameMapper不能满足你的要求,你可以使用Jest的transform配置选项来指定资产如何转换,例如,一个返回文件基本名称的转换器(比如require('logo.jpg ');返回'logo')可以写成:
所以这将使你的
wrapper.props().src
成为一个字符串(可用于任何类型的匹配器,如.toEqual
),也意味着expect(wrapper).toMatchSnapshot()
也像一个魅力尊重图像路径。[upd]不要错过在config中为JS/JSX文件指定
"babel-jest"
转换ghg1uchk3#
3yhwsihp4#
像这样的事...
或者,要访问src属性:
http://airbnb.io/enzyme/docs/api/ReactWrapper/find.html
nzk0hqpo5#
"* 这对我很有效**
组件:
试验:
https://acloud.guru/forums/serverless-portfolio-with-react/discussion/-KxEN_3qG3G9oxSHjyAN/Testing%20React%20-%20Testing%20images%20using%20expect(image.node.props.src)
nc1teljy6#