효소/mocha/chai에서 div 또는 기타 요소의 내용을 어떻게 테스트합니까?

Question

div의 내용이 내가 기대하는 것과 일치하는지 확인하려고합니다. 내가 가진 것은 :

expect(wrapper.find('div.title').text().to.equal('A New Day'); 

그러나 이것은 나를 위해 작동하지 않습니다. 이것은 enzyme/chai/mocha에서 가능합니까?

감사

Answer 1

당신이 찾고있는이 건물은 textContent

expect(wrapper.find('div.title').textContent).to.equal('A New Day');

당신이 당신처럼 소리 차이를 사용하는 경우, 당신은 사용자 정의 주장을 추가 할 수 있습니다. 여기 제가 우리 프로젝트에 쓴 것입니다.

// Asserts that the the DOM Element has the expected text 
// E.G. expect(myDOMNode).to.have.text('the text'); 
const text = Assertion.addMethod('text', function(value) { 
    this.assert(
    this._obj.textContent === value, 
    'expected #{exp} === #{act}', 
    'expected #{exp} !== #{act}', 
    this._obj.textContent, 
    value 
); 
}); 

Answer 2

할 수 있습니다 쉽게 설정 같은 것들에 대한 아주 대단한 차이 효소 https://github.com/producthunt/chai-enzyme. 이제 사용할 수 있습니다

expect(wrapper.find('.title')).to.have.text('A New Day')

Answer 3

을 당신이 당신의 텍스트 내용에 얼마나 반작용/JSX 정도에 따라,이 간단한 일치를 만들기 위해 엉망이 될 수 실패 :

// wrapper.text() 
<!-- react-text: 28 -->A <!-- /react-text --> 
<!-- react-text: 29 -->New<!-- /react-text --> 
<!-- react-text: 30 --> Day<!-- /react-text --> 

그래서 테스트해야하는 경우 직접적, 당신과 같이 그들을 제거 할 수 있습니다 정규식 정규식 HTML에 대해 경고 this answer, 온

expect(wrapper.text().replace(/<!--[^>]*-->/g, "")).toContain("A New Day"); 

. 그러나 반응 노드 주석은 비교적 간단합니다.

---

p.s. 대개 시험 소품 대신에 더 좋은 아이디어입니다. react의 html 렌더링은 이미 페이스 북 단위 테스트를 마쳤습니다