酶 3 获取呈现的 DOM-节点的属性

Question

我从 myDomNode.html();

得到这个 html

<div aria-expanded="true"> {{someChildren}} </div>

在我的测试中，我想检查 aria-expanded 是否设置为 true。

酶 2.x 和反应 15.x 这是有效的： expect(myDomNode.attr('aria-expanded')).toBeTruthy(); 但在更新对 16.x 和酶 3.x 的反应后，我在更新后收到错误消息，指出该值未定义。我在文档中找不到任何有用的提示。

我得到的 myDomNode 是这样的：

const domNode = expanded => render(<Component expanded={expanded} />);
const myDomNode = domNode(true);

渲染是从酶中导入的。我正在使用 enzyme-adapter-react-16

Enzyme.configure({adapter: new Adapter()});

有趣的是 myDomNode.is('div'); 和 myDomNode.is('[aria-expanded="true"]') 也是错误的。

更新后如何修复测试？

仅供参考，这是失败的测试之一：https://github.com/mstruebing/PackageFactory.Guevara/blob/updateReact/packages/react-ui-components/src/ToggablePanel/toggablePanel.spec.js#L130

Answer 1

我克隆了您的存储库并执行了测试。我更改了一些功能，这就是我所做的：

const getHeaderDomNode = panelDomNode => panelDomNode['0'].children[0];

test('open ToggablePanel should render a <ToggablePanel.Header/> with an "aria-expanded" attribute of "true".', () => {
    const wrapper = fullyRenderToggablePanel(true);
    expect(getHeaderDomNode(wrapper).attribs['aria-expanded']).toBeTruthy();
});

重要的是，当我看到 'wrapper' 变量和 console.log(wrapper) 时，我发现了这个：

{
    '0':
        { 
            type: 'tag',
            name: 'section',
            namespace: 'http://www.w3.org/1999/xhtml',
            attribs: { class: 'baseClassName isOpenClassName' },
            'x-attribsNamespace': { class: undefined },
            'x-attribsPrefix': { class: undefined },
            children: [ [Object], [Object] ],
            parent: null,
            prev: null,
            next: null,
            root:
            { 
                type: 'root',
                name: 'root',
                namespace: 'http://www.w3.org/1999/xhtml',
                attribs: {},
                'x-attribsNamespace': {},
                'x-attribsPrefix': {},
                children: [Array],
                parent: null,
                prev: null,
                next: null 
            } 
        }, 
    options:
        { 
            withDomLvl1: true,
            normalizeWhitespace: false,
            xml: false,
            decodeEntities: true 
        },
    length: 1,
    _root: [Circular] 
}

所以，如果您想访问 children，您似乎必须这样做：

wrapper['0'].children

现在属性在一个 object 中，里面有文字 object，所以如果你想获得一个属性（例如：'arial-expanded'），你必须这样做：

wrapper['0'].children[0]['arial-expanded']

Answer 2

您也可以只使用属性语法搜索元素并提取文本：

expect(wrapper.find('[aria-expanded]').prop('aria-expanded')).toBeTruthy();

http://airbnb.io/enzyme/docs/api/selector.html

酶 3 获取呈现的 DOM-节点的属性

Enzyme 3 get attributes of rendered DOM-node

javascript

reactjs

enzyme