cách chọn văn bản phần tử có phản ứng + enzyme

Question

Chỉ cần nội dung nói. Một số mã ví dụ:

let wrapper = shallow(<div><button class='btn btn-primary'>OK</button></div>); 

const b = wrapper.find('.btn'); 

expect(b.text()).to.be.eql('OK'); // fails, 

Phương thức html trả về nội dung của phần tử nhưng cũng chính yếu tố đó cộng với tất cả các thuộc tính, ví dụ: nó cung cấp cho <button class='btn btn-primary'>OK</button>. Vì vậy, tôi đoán, trường hợp xấu nhất, tôi có thể gọi html và regex nó, nhưng ...

Có cách nào để lấy nội dung của phần tử, vì vậy tôi có thể khẳng định điều đó.

Answer 1

Đừng quên rằng bạn đang chuyển một nút (ReactElement) đến hàm shallow và không có thuộc tính HTML class trong React. Bạn phải sử dụng className.

Từ Phản ứng tài liệu

Tất cả các thuộc tính này là lạc đà-cased và các thuộc tính class và for là className và htmlFor, tương ứng, để phù hợp với DOM API đặc điểm kỹ thuật.

thử nghiệm này nên làm việc

const wrapper = shallow(<div><button className='btn btn-primary'>OK</button></div>); 
const button = wrapper.find('.btn'); 
expect(button.text()).to.be.eql('OK'); 

Answer 2

Tôi nghĩ @ louis-barranqueiro có lẽ đã trả lời câu hỏi cơ bản của bạn. Tức là, bạn muốn có bộ chọn CSS và vì vậy bạn nên sử dụng className không phải class.

Tuy nhiên, để cố gắng và trả lời câu hỏi làm thế nào để chọn văn bản của một nguyên tố bằng cách sử dụng ví dụ thực tế bạn đã cho:

let wrapper = shallow(<div><button class='btn btn-primary'>OK</button></div>);

bạn cần phải sử dụng một cái gì đó giống như một object property selector, ví dụ:

expect(wrapper.find({ class: "btn btn-primary" }).text()).to.equal('OK');

hoặc cú pháp prop:

expect(wrapper.find('[class="btn btn-primary"]').text()).to.equal('OK');

(hoặc thậm chí một cách rõ ràng hơn):

expect(wrapper.find('button[class="btn btn-primary"]').text()).to.equal('OK');