Jest.js 使用React测试库Assert图像的宽度

mtb9vblg 于 2023-08-01 发布在 Jest

关注(0)|答案(3)|浏览(114)

假设我有一个简单的基于图像的组件：

// ./Figure.js

const Figure = ({src}) => (
    <img
        src={src}
        width="100%"
    />
);

字符串
我想测试它的宽度是100%。
我的测试：

// ./Figure.test.js

import Figure from './Figure'
import { render, screen } from '@testing-library/react'

describe('Figure', () => {
    const setup = () => {
        return render(
            <Figure
                src="https://src.com"
            />
        )
    }

    it('has the right width', () => {
        setup()

        const image = screen.getByAltText('alt')

        expect(image.src).toBe('https://src.com/')
        expect(image.width).toBe("100%")
    })
})

型
但是，这给了我一个错误：

● Figure › renders

    expect(received).toBe(expected) // Object.is equality

    Expected: "100%"
    Received: 0

型
问：如何在不使用快照的情况下使用React测试库Assert图像的宽度？

jestjs

来源：https://stackoverflow.com/questions/68509102/assert-the-width-of-an-image-using-react-testing-library

3条答案

按热度按时间

dnph8jn41#

最直接的答案是将100%宽度定义指定为CSS样式，而不是使用width属性。HTML标准指出width和height是表示资源的像素尺寸的“有效非负整数”;你实际上想要的是一个适合它的容器的图像，这是一个CSS问题。
通过这样做，您现在可以在测试中使用getComputedStyle()来验证您指定的内容，并且它不会被其他任何内容覆盖。

// ./Figure.js
const Figure = ({src}) => (
    <img
        src={src}
        style="width: 100%;"
    />
);

// ./Figure.test.js
it('has the right width', () => {
    setup()

    const image = screen.getByAltText('alt')

    expect(image.src).toBe('https://src.com/')
    expect(getComputedStyle(image).width).toBe("100%")
})

字符串
扩展的答案是Jest在引擎盖下使用了jsdom，它本质上是一个用JavaScript编写的模拟浏览器。它的行为与浏览器非常相似，但并不完全相同，以便用于测试。
我个人并不知道jsdom的所有边界，但我记得在测试与维度或定位相关的任何东西时遇到过问题。因此，我倾向于要么不显式地测试这些东西（我更喜欢测试行为而不是表现），要么在真正的无头浏览器中测试它们，例如使用jest-electron-runner或Taiko。

赞(0）回复(0）举报 2023-08-01

omqzjyyz2#

我遇到了同样的问题，这样对我来说很好：

expect(image).toHaveAttribute("width", "100%")

字符串

赞(0）回复(0）举报 2023-08-01

kmb7vmvb3#

如果您已经找到了这个答案，正在寻找如何使用CSS设置的宽度，您可以简单地使用Testing Library的jest-dom提供的.toHaveStyle()Assert

// ./Figure.js

const Figure = ({src}) => (
    <img
        src={src}
        style="width: 24px;"
    />
);

// ./Figure.test.js
it('has the right width', () => {
    setup()

    const image = screen.getByAltText('alt')

    expect(image.src).toBe('https://src.com/')
    expect(image).toHaveStyle({ width: '24px'})
})

字符串

赞(0）回复(0）举报 2023-08-01

我来回答

Jest.js 使用React测试库Assert图像的宽度

3条答案

相关问题

热门标签

最新问答