使用Enzyme / React測試className的CSS

Question

我在react組件中找不到如何檢查div的CSS。

您可以檢查內聯樣式（如何使用Jest + Enzyme測試React組件的樣式？）但是，這不能讓我檢查組件的className='App-header' 。

我已經成功添加了chai-jquery ，但是我不知道如何使我的組件完全加載，我只得到了<body></body 。

回答3之1將解決我的問題：

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

參考文獻：

使用assert的嘗試失敗（如何測試單擊后是否顯示元素？）

好主意，但需要內聯樣式（如何使用酶測試React組件屬性的樣式）

Answer 1

為了將整個組件呈現為DOM，您需要調用enzyme.mount(<Component/>) 。 當定義了global.document和global.window （例如從global.window中定義），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不會jsdom外部樣式表---盡管最近添加了對<style/>標記的支持，但是代替測試樣式，檢查某個特定元素可能更有意義，例如<h1/>或<h2/> 。

使用Enzyme / React測試className的CSS

問題描述

1 個解決方案

解決方案1
2 2018-02-12 22:07:44

使用Enzyme / React測試className的CSS

問題描述

1 個解決方案

解決方案1 2 2018-02-12 22:07:44

解決方案1
2 2018-02-12 22:07:44