React 测试库：测试样式（特别是背景图片）
Posted
技术标签:
【中文标题】React 测试库：测试样式（特别是背景图片）【英文标题】：React testing library: Test styles (specifically background image) 【发布时间】：2019-04-06 17:32:15 【问题描述】：我正在使用 TypeScript 构建一个 React 应用程序。我使用 react-testing-library 进行组件测试。
我正在为我的登录页面构建一个parallax 组件。
组件通过props传递图片，通过JSS设置为背景图片：
<div
className=parallaxClasses
style=
backgroundImage: "url(" + image + ")",
...this.state
>
children
</div>
这是我写的单元测试：
import React from "react";
import cleanup, render from "react-testing-library";
import Parallax, OwnProps from "./Parallax";
afterEach(cleanup);
const createTestProps = (props?: object): OwnProps => (
children: null,
filter: "primary",
image: require("../../assets/images/bridge.jpg"),
...props
);
describe("Parallax", () =>
const props = createTestProps();
const getByText = render(<Parallax ...props />);
describe("rendering", () =>
test("it renders the image", () =>
expect(getByText(props.image)).toBeDefined();
);
);
);
但它没有说：
● Parallax › rendering › it renders the image
Unable to find an element with the text: bridge.jpg. 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>
<div
class="Parallax-parallax-3 Parallax-primaryColor-4"
style="background-image: url(bridge.jpg); transform: translate3d(0,0px,0);"
/>
</div>
</body>
16 | describe("rendering", () =>
17 | test("it renders the image", () =>
> 18 | expect(getByText(props.image)).toBeDefined();
| ^
19 | );
20 | );
21 | );
at getElementError (node_modules/dom-testing-library/dist/query-helpers.js:30:10)
at getAllByText (node_modules/dom-testing-library/dist/queries.js:336:45)
at firstResultOrNull (node_modules/dom-testing-library/dist/query-helpers.js:38:30)
at getByText (node_modules/dom-testing-library/dist/queries.js:346:42)
at Object.getByText (src/components/Parallax/Parallax.test.tsx:18:14)
如何使用 Jest 和 react-testing-library 测试图像是否正确设置为背景图像？
【问题讨论】：
【参考方案1】：getByText 找不到图像或其 CSS。它的作用是查找带有您指定的文本的 DOM 节点。
在您的情况下，我会将data-testid 参数添加到您的背景（<div data-testid="background">）并使用getByTestId 查找组件。
之后你可以这样测试：
expect(getByTestId('background')).toHaveStyle(`background-image: url($props.image)`)
确保安装jest-dom 以拥有toHaveStyle。
【讨论】：
这对我不起作用，即使安装了 jest-dom，我也会得到TypeError: expect(...).toHaveValue is not a function。可能是因为我正在测试一个样式组件？
知道了，必须在测试文件中添加import '@testing-library/jest-dom/extend-expect'。在这里找到它spectrum.chat/testingjavascript/help/…
我真的建议您制作一个 setupTests 文件，该文件将其导入您使用的任何 jest 文件:) 并且所有“toHaveStyle、Content 等......”都会自动导入。在任何测试文件中。加快开发速度，解决忘记导入时可能遇到的问题。
@LuizHenriqueGuerra 你的错误信息说：toHaveValue 答案是 toHaveStyle
@Brainmaniac 无论哪种方式，如果没有在我的下一条评论中导入，expect api 中的任何方法都无法正常工作【参考方案2】：
如果您想避免在组件中添加 data-testid，可以使用 react-testing-library 中的container。
const container = render(<Parallax ...props)/>
expect(container.firstChild).toHaveStyle(`background-image: url($props.image)`)
此解决方案对您的组件测试很有意义，因为您正在测试根节点的背景图像。但是，请记住文档中的此注释：
如果您发现自己使用容器来查询渲染元素，那么您应该重新考虑！其他查询旨在更灵活地应对将对您正在测试的组件所做的更改。避免使用容器查询元素！
【讨论】：
避免将实现细节假设为容器的第一个带有背景图像的子元素的问题的一种方法可能是为具有背景图像的元素赋予图像的 aria-role (role="img") 然后使用 getByRole('img') 而不是 container.firstChild。然后测试人员在树中查找作为图像的第一个元素。【参考方案3】：
使用 react-testing-library 测试组件 css 的简单解决方案。这对我很有帮助，它工作得很好。
test('Should attach background color if user
provide color from props', () =>
render(<ProfilePic name="Any Name" color="red" data-
testid="profile"/>);
//or can fetch the specific element from the component
const profile = screen.getByTestId('profile');
const profilePicElem = document.getElementsByClassName(
profile.className,
);
const style = window.getComputedStyle(profilePicElem[0]);
//Assertion
expect(style.backgroundColor).toBe('red');
);
【讨论】：
以上是关于React 测试库：测试样式（特别是背景图片）的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 Jest 和/或 Enzyme 测试由 React 组件呈现的样式和媒体查询