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 ===＆＃39;＆＃39; 而不是像素值。

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

Answer 1

对于找到这个帖子的人来说，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 2

您可以通过快照测试来测试样式，但Jest不支持通过断言评估组件样式 - 也就是说通过expect来评估。

要执行此操作，您需要将Jest与enzyme，chai和chai-enzyme结合使用。

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

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

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

这是我的设置文件：

// test/setup.js
import React from 'react';
import chai from 'chai';
import chaiEnzyme from 'chai-enzyme';
import { shallow, render, mount } from 'enzyme';

// Add commonly used methods and objects as globals
global.chai = chai;
global.mount = mount;
global.React = React;
global.render = render;
global.shallow = shallow;

chai.use(chaiEnzyme());

这是我的package.json：

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

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

Answer 3

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

小例子：

component.js

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

component.test.js

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

Answer 4

测试样式？我认为这可能是一种更好的方法来测试样式https://github.com/Huddle/PhantomCSS，我只使用Jest来测试元素存在和元素行为，而不是视觉。

如果你真的想做你正在做的事情，那么为什么不使用jQuery for devDependency来帮助你获得dom节点属性，以及你的元素＆＃34;下拉＆＃34;仅在单击时打开，您可能希望在执行expect（）之前设置超时和某些dom行为。

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

4 个答案: