在 React 组件上测试样式

Question

我有一个带有函数的类，它在一个单独的文件中打开一个模态 (open_modal(...)) 到一个组件，因为我有大量使用此功能的模态。

import open from "open";
import $    from "jquery";

class ReactHelpers {

    static open_webpage(page_url) {
        open(page_url);
    }

    static open_modal(overlay_id, modal_id) {
        $(overlay_id).css("display", "block");
        $(modal_id).css("display", "block");
    }

    static close_modal(overlay_id, modal_id) {
        $(overlay_id).css("display", "none");
        $(modal_id).css("display", "none");
    }
}

export default ReactHelpers;

我试图断言 open_modal 函数已将 css 添加到有问题的 div 中，如下所示：

    it('should close the modal', function () {
        const wrapper = shallow(
            <div id="overlay_id">
                <div id="modal_id">
                    <p>modal</p>
                </div>
            </div>
        )
        const overlay = wrapper.find('#overlay_id')
        const modal = wrapper.find('#modal_id')
        ReactHelpers.open_modal(overlay, modal);
        console.log('OVERLAY ', overlay);
        expect(overlay.prop('style')).toHaveProperty('display', 'block');
        expect(modal_style).toHaveProperty('display', 'block');
    });

此外，我确定如何测试 open_webpage 函数，因为这是一个库函数。在我对其他组件的其他测试中，我对此进行了嘲笑，因此它从未真正经过测试。

非常感谢任何帮助。

谢谢

Answer 1

测试 dom 元素的样式：

1. 您应该挂载组件（使用mount），而不是仅仅创建它（使用shallow）。

2. 由于您是直接更改 dom 元素的样式，因此您应该测试 dom 元素的样式 (component.getDOMNode().style.display)，而不是测试 react 样式属性 (component.prop.style)。

示例：

import $ from "jquery";
it("should create a div and changes its color to red", () => {
  const wrap = mount(
      <div id="red_el"></div>
  );
  const el = wrap.find("#red_el").getDOMNode()
  $(el).css("color", "red");
  expect(el.style.color).toEqual("red");
});

在你的情况下：

it("should open modal", () => {
  const wrapper = mount(
    <div>
      <div id="overlay" style={{ display: "none" }}>
        <div id="modal" style={{ display: "none" }}>
          overlay
        </div>
      </div>
    </div>
  );
  const overlay = wrapper.find("#overlay").getDOMNode();
  const modal = wrapper.find("#modal").getDOMNode();
  ReactHelpers.open_modal(overlay, modal);
  expect(overlay.style.display).toEqual("block");
  expect(modal.style.display).toEqual("block");
});

See it live on codesandbox（切换到测试选项卡以运行测试。）