如何使用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(''); 
});

这导致iconHeight ===''而不是像素值.

我想知道窗口是否被Jest嘲笑.或者如果不支持窗口.

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`);
})

Answer 2

对于发现此线程的任何人，Jest Enzyme现在都有一个断言可以测试样式：toHaveStyle：https : //github.com/blainekasten/enzyme-matchers/blob/master/README.md#tohavestylestylekeystring-stylevalueany

对我来说，问题是，从代码中看到的只是测试对象，而且我有很多样式都是数组（我正在使用React Native BTW），所以它对我不起作用。

我正在使用此方法测试特定样式：

const render = wrapper.dive();
expect(render.find("[testID='bannerStamp']").get(0).props.style[0].right).toBe(7);

Answer 3

您可以通过快照测试来测试样式，但 Jest 不支持通过断言\xe2\x80\x94（即通过expect.

\n\n

为此，您需要将 Jest 与酶、chai和chai-enzyme结合起来。

\n\n

这种组合将允许您编写像这个简单示例这样的测试：

\n\n

it(\'should render style\', () => {\n  chai.expect(shallow(\n    <div\n      style={{\n        left: \'4rem\'\n      }}\n    />\n  )).to.have.style(\'left\', \'4rem\');\n});\n

\n\n

首先，创建一个安装文件并将其添加到jest.setupFilespackage.json 中的数组中。有关此选项的概述，请参阅Jest 文档。

\n\n

这是我的设置文件：

\n\n

// test/setup.js\nimport React from \'react\';\nimport chai from \'chai\';\nimport chaiEnzyme from \'chai-enzyme\';\nimport { shallow, render, mount } from \'enzyme\';\n\n// Add commonly used methods and objects as globals\nglobal.chai = chai;\nglobal.mount = mount;\nglobal.React = React;\nglobal.render = render;\nglobal.shallow = shallow;\n\nchai.use(chaiEnzyme());\n

\n\n

这是我的 package.json：

\n\n

{\n  "jest": {\n    "setupFiles": [\n      "./test/setup.js"\n    ]\n  }\n}\n

\n\n

现在，必要时，您可以通过 访问 Chai 断言 API chai.expect，并通过 访问 Jest 断言 API expect。

\n