reactjs - 如何使用 Jest.js 对 React 组件的样式进行单元测试？

Question

我正在使用 JestJS 构建单元测试 (npm jest-cli)并且需要验证 ReactJS 元素是否包含我正在寻找的 CSS 样式。

我尝试检查

it('should highlight the selected option in the drop-down list', function() {
    var iconTriangleDown = TestUtils.findRenderedDOMComponentWithClass(dropList, 'icon-triangle-down');

    var iconHeight = window.getComputedStyle(iconTriangleDown.getDOMNode(), null).height;

    expect(iconHeight).notToEqual(''); 
});

这会导致 图标高度 === ''而不是像素值。

我想知道窗口是否被 Jest mock 。或者如果窗口不受支持。

Answer 1

使用 jest-dom 相当容易和 react-testing-library .

小例子:

组件.js

const Component = () => <div style={{left: '4rem'}}>Left component</div>;

组件.test.js

test("left shoud be 4rem", () => {
    const { getByText } = render(<Component />);
    expect(getByText(/left component/i).parentElement).toHaveStyle(`left: 4rem`);
})