Question

我无法找到如何在我的react组件中检查div的CSS。

您可以检查内联样式（How can I test React component's style with Jest + Enzyme?）但这并不能让我检查我的className='App-header'我的组件。

我已成功添加chai-jquery，但我不知道如何让我的组件完全加载，我只返回<body></body。

回答1/3将解决我的问题：

1。如何在不使用expect(wrapper.find('#id'))...的CSS作为内联样式的情况下使用<div>测试/检查我的div的类CSS。

2。如何确保我的完整组件渲染，因为现在jquery只返回<body></body>，但我的chai /酶使用shallow(<App />)返回我的完整组件？

第3。有没有办法测试CSS样式表？这是一种解决方法。

it('should have a header with display: block', (done)=>{
        const wrapper = shallow(<App />);

        const body = $('body')
        console.log(body) // Returns <body></body>
        expect(body).exist; // Returns true
        expect(body).to.have.css('display', 'block'); //nothing in body, doesn't work

        expect(wrapper.find('#body').get(0).props).to.have.property({display: 'block'}) //not in the props because CSS comes from className 

        done()
    })

参考文献：

尝试使用assert（how to test showing an element after a click?）

失败

好主意但要求内联样式（How to test style for a React component attribute with Enzyme）

Answer 1

为了将整个组件呈现为DOM，您需要调用enzyme.mount(<Component/>)。当定义global.document和global.window时（例如来自jsdom），Enzyme可以将您的组件渲染为模拟DOM。然后，您可以调用wrapper.getDOMNode()来获取包装器的底层DOM元素。例如：

import jsdom from "jsdom";
import {mount} from "enzyme";

const dom = jsdom.jsdom('<!doctype html><html><body></body></html>');
global.document = dom;
global.window = dom.defaultView;

it('should have a header with display: block', (done)=>{
    const wrapper = mount(<App />); // note `mount()`, not `shallow()`. 

    expect(wrapper.find('#body').get(0).getDOMNode().getComputedStyle()).to.have.property({display: 'block'})  

    done()
})

但是，正如目前的情况一样，jsdom不会引入外部样式表 - 虽然最近添加了对<style/>标签的支持，但是它不是测试样式，而是更有意义检查特定元素，例如<h1/>或<h2/>。

使用Enzyme / React测试className＆＃CSS

1 个答案: