使用 Enzyme/React 测试 className 的 CSS答案

【问题标题】：Testing for className's CSS using Enzyme/React使用 Enzyme/React 测试 className 的 CSS
【发布时间】：2018-07-23 03:36:08
【问题描述】：

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

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

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

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

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

2。我如何确保我的完整组件呈现，因为现在 jquery 只返回 <body></body>，但我的 chai/enzyme 使用 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()
    })

参考资料：

尝试使用断言失败 (how to test showing an element after a click?)

好主意，但需要内联样式 (How to test style for a React component attribute with Enzyme)

【问题讨论】：

你想检查body 有一个类App-header 并且这个类包含display: block 作为样式吗？
基本上。我想看看有 App-header 类的主体中是否有 display: block，但我也可以仔细检查该类。但是如果我这样做，我也可以确保该类存在，因为我会知道该类的 CSS。如果还有其他类，我希望测试查看身体也有的那些类

标签： jquery reactjs unit-testing chai enzyme

【解决方案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/>。

【讨论】：

谢谢，我听一些人说测试样式可能没有意义。虽然我会尝试 getDOMNode() 和 getComputedStyle()，但谢谢！
另外，另一种有用的技术是快照测试——基本上是将组件的输出与最新版本进行比较。它有助于避免编写繁琐的测试用例来检查每个版本都必须更新的单个元素等。
getDOMNode 不是一个函数，知道为什么吗？另外，是否有必要这样指定你的 jsdom，我的设置为 jsdom.jsdom('') 但是当我看到你的时改变了它