Jquery 测试类名'；s CSS使用酶/反应_Jquery_Reactjs_Unit Testing_Chai_Enzyme

Jquery 测试类名'；s CSS使用酶/反应

jquery reactjs unit-testing

Jquery 测试类名'；s CSS使用酶/反应,jquery,reactjs,unit-testing,chai,enzyme,Jquery,Reactjs,Unit Testing,Chai,Enzyme,我在react组件中找不到如何检查div的CSS 可以检查内联样式（）但这不允许我检查组件的className='App-header' 我已经成功添加了chai jquery，但是我不知道如何让我的组件完全加载，我只得到为了将整个组件呈现到DOM中，您需要调用enzyme.mount（）。当定义了global.document和global.window时（类似于jsdom），Ezyme可以将组件渲染成模拟DOM。然后可以调用wrapper.getDOMNode（）来获取包装器的底层DOM元

我在react组件中找不到如何检查div的CSS

可以检查内联样式（）但这不允许我检查组件的

className='App-header'

我已经成功添加了

chai jquery

，但是我不知道如何让我的组件完全加载，我只得到

为了将整个组件呈现到DOM中，您需要调用enzyme.mount（）
。当定义了global.document
和global.window
时（类似于jsdom），Ezyme可以将组件渲染成模拟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”导入jsdom；
从“酶”导入{mount}；
const dom=jsdom.jsdom（“”）；
global.document=dom；
global.window=dom.defaultView；
它（'应该有一个带有display:block'，（done）=>{
const wrapper=mount（）；//注意'mount（）`，而不是'shallow（）`。
expect（wrapper.find（'#body'）.get（0.getDOMNode（）.getComputedStyle（））.to.have.property（{display:'block'））
完成（）
})

然而，就目前情况而言，jsdom
不会引入外部样式表——尽管最近增加了对
标记的支持，但与其测试样式，不如检查特定元素，如
或
谢谢，我听一些人说，也许测试风格没有意义。尽管我会尝试getDOMNode（）和getComputedStyle（），谢谢！另外，另一种有用的技术是快照测试——基本上是将组件的输出与上一版本区分开来。它有助于避免编写挑剔的测试用例，检查每个版本都必须更新的单个元素等。getDOMNode
不是一个函数，知道为什么吗？另外，是否有必要像这样指定您的jsdom，我将我的设置为jsdom.jsdom（“”），但当我看到您时更改了它。您想检查body
是否有类应用程序标题，并且该类基本上包含display:block
作为样式吗。我只想看看有App header类的body中是否有一个display:block，但我也可以再次检查该类。但是如果我这样做的话，我也可以确保这个类是存在的，因为我会知道这个类的CSS。如果还有其他类，我想让测试看看身体也有哪些类
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()
})