javascript - enzyme 3获取渲染的DOM节点的属性

我从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

最佳答案

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

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

重要的是，当我在console.log(wrapper)中看到'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]
}

因此，似乎如果要访问子级，则必须执行以下操作：

wrapper['0'].children

现在属性位于一个内部带有文字对象的对象中，因此，如果要获取属性（例如：“ arial-expanded”），则必须执行以下操作：

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

关于javascript - enzyme 3获取渲染的DOM节点的属性，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46522963/