使用 React 测试库断言图像的宽度

Question

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

\n

// ./Figure.js\n\nconst Figure = ({src}) => (\n    <img\n        src={src}\n        width="100%"\n    />\n);\n

\n

我想测试它的宽度是100%。

\n

我的测试：

\n

// ./Figure.test.js\n\nimport Figure from './Figure'\nimport { render, screen } from '@testing-library/react'\n\ndescribe('Figure', () => {\n    const setup = () => {\n        return render(\n            <Figure\n                src="https://src.com"\n            />\n        )\n    }\n\n    it('has the right width', () => {\n        setup()\n\n        const image = screen.getByAltText('alt')\n\n        expect(image.src).toBe('https://src.com/')\n        expect(image.width).toBe("100%")\n    })\n})\n

\n

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

\n

  \xe2\x97\x8f Figure \xe2\x80\xba renders\n\n    expect(received).toBe(expected) // Object.is equality\n\n    Expected: "100%"\n    Received: 0\n

\n

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

\n

Answer 1

最直接的答案是将 100% 宽度定义指定为 CSS 样式，而不是使用该width属性。HTML标准指出 和width是height表示资源像素尺寸的“有效非负整数”；你真正想要的是一个适合其容器的图像，这是 CSS 的问题。

通过执行此操作，您现在可以在测试中使用getCompulatedStyle()来验证您指定的内容，并且它不会被其他任何内容覆盖。

// ./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。