reactjs - 使用 className react Enzyme Jest 测试组件

Question

我是遵循 .find() 的两个 enzyme 示例和这个 GitHub enzyme-example-jest示例获取一个基本组件来测试和验证最外层元素 className 是否存在，我不明白为什么这没有通过:

// react 组件

class VisitorShortcut extends Component {
//all the props & lifecycle hooks here
render() {
        return (
            <div className="visitor-shortcuts"> // <-- this className is being tested
                <div
                    onClick={e => e.stopPropagation()}
                    className="dropdown open"
                >
                    <ul
                        style={style}
                        ref="shortcutContainer"
                        className={"dropdown-menu "}
                    >
                        {results}
                    </ul>
                </div>
            </div>
        );
    }
}

//测试文件

import React from "react";
import { shallow, mount } from "enzyme";
import VisitorShortcut from "../VisitorShortcut";

describe("Shortcuts", () => {
  test("The main Class exists", () => {
    expect(
        (<VisitorShortcut />).find(".visitor-shortcuts").length
    ).toBe(1);
  });
});

//输出

Expected value to be (using ===):
  1
Received:
  0

如果我根据 Enzyme 文档切换到 expect(wrapper.find('div.some-class')).to.have.length(3); ，则输出为 类型错误:无法读取未定义的属性“have”

我相当确定我不需要使用 mount API，而是使用 shallow

感谢您帮助澄清这一点。看起来很基础...

Answer 1

下面的代码对我有用

import React from "react";
import { shallow, mount } from "enzyme";
import { assert } from 'chai';
import VisitorShortcut from "../VisitorShortcut";    


describe("Shortcuts", () => {
  test("The main Class exists", () => {
    const wrapper = shallow(<VisitorShortcut />);
    const visitorShortcutsWrapper = wrapper.find('.visitor-shortcuts');
    assert.equal(visitorShortcutsWrapper.length, 1);
  });
});

顺便说一句，我正在使用 chai 包中的 assert 。