react+enzyme을 사용하여 요소 텍스트를 선택하는 방법

react+enzyme을 사용하여 요소 텍스트를 선택하는 방법

딱 그렇게 써있네요.코드 예시:

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

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

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

또,htmlmethod는 요소의 내용뿐만 아니라 요소 자체와 모든 속성을 반환합니다(예:<button class='btn btn-primary'>OK</button>그럼 최악의 경우엔 전화할 수 있겠네요html다시 만들긴 하지만...

내가 단언할 수 있도록 요소의 내용을 얻을 수 있는 방법은 없을까?

"텍스트 포함"을 검색하다가 이 항목을 발견한 경우 다음을 시도해 보십시오.

it('should show correct text', () => {
  const wrapper = shallow(<MyComponent />);
  expect(wrapper.text().includes('my text')).toBe(true);
});

노드(ReactElement)를 전달하고 있음을 잊지 마십시오.shallowHTML Atribute는 없습니다.class반응합니다.사용하셔야 합니다.className.

From React 문서

모든 Atribute는 camel-case이며 Atribute는class그리고.for이다className그리고.htmlForDOM API 사양과 일치합니다.

이 테스트는 유효합니다.

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

아마 @louis-barranqueiro가 당신의 근본적인 질문에 답했을 것입니다.즉, CSS 셀렉터가 필요하기 때문에 CSS 셀렉터를 사용하여className것은 아니다.class.

그러나 실제 예제를 사용하여 요소의 텍스트를 선택하는 방법에 대한 질문에 답하려면 다음과 같이 하십시오.

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

오브젝트 속성 셀렉터 같은 것을 사용해야 합니다.예를 들어 다음과 같습니다.

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

또는 prop 구문:

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

(또는 보다 명확하게):

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

이 게시물을 검색하던 중 우연히 이 게시물을 보게 되었습니다.textarea이내에jest그리고.enzyme같은 것을 찾고 있는 유저의 경우는, 다음의 몇개의 텍스트를 선택할 수 있습니다(길이를 이미 알고 있는 경우).

let wrapper;
let textareaNode;
beforeEach(() => {
    wrapper = mount(<Textarea value="Hello world" />);
    textareaNode = () => wrapper.find("textarea").getDOMNode();
});

it("selects all of the select within the given range", () => {
    textareaNode().setSelectionRange(0, 6);
    wrapper.find("button").simulate("click"); // this would delete the selection via a ref
    expect(wrapper.find("textarea").props().value).toEqual("world");
});

언급URL : https://stackoverflow.com/questions/38277165/how-to-select-element-text-with-reactenzyme