Jest 및/또는 효소를 사용하여 React 구성요소에 중첩된 요소의 속성을 얻는 방법은 무엇입니까?

Jest 및/또는 효소를 사용하여 React 구성요소에 중첩된 요소의 속성을 얻는 방법은 무엇입니까?

리액트 앱에 이미지가 올바르게 로드되었는지 테스트하고 싶습니다.확인하기로 했습니다.src의 속성img요소가 React 구성 요소 내에 중첩됩니다.Jest 테스트 프레임워크와 필요한 경우 효소 테스트 유틸리티를 사용하고 싶습니다.

을 파헤침으로써Object.keys저는 다음과 같은 해결책을 생각해 낼 수 있었습니다.제가 잘 모르는 선은 별표로 표시되어 있습니다.

import React     from 'react';
import {shallow} from 'enzyme';
import App       from './App';

it('should have the logo image', () => {
  const app = shallow(<App />);
  const img = app.find('img');
  const src = img.node.props.src; // ******
  expect(src).toBe('logo.svg');
});

이 솔루션은 작동하지만 약간 복잡해 보이고(랩퍼 속성의 속성이 필요함) 다소 모호해 보입니다(온라인에서는 명확한 설명을 쉽게 찾을 수 없습니다).그러면 이것이 올바른/가장 간단한 방법일까요?

• 그렇다면 문서는 어디에 있습니까?
• 그렇지 않은 경우, 이 작업을 어떻게 해야 합니까?예: 기성품이 있습니까?getAttribute또는retrieveProp효소의 방법 등?예를 들어 효소 대신 다른 방법을 사용하여 이 작업을 수행하는 더 나은 방법이 있습니까?react-addons-test-utils?

React 요소 속성에 대한 이 질문은 렌더링된 속성 값을 주장하는 데 대한 문서를 찾는 데 어려움을 겪고 있는 포스터를 보여주지만, 제게는 그다지 답이 되지 않는 것 같습니다.기타 많은 질문(예: 여기, 여기, 여기)은 React/Jest/Enzyme을 다루지만 속성값 검색은 다루지 않습니다.

파헤친 결과, 다음과 같은 것을 발견했습니다.질문에 표시된 행:

const src = img.node.props.src;

는 다음과 같이 단순화할 수 있습니다.

const src = img.prop('src');

매뉴얼은 여기서 찾을 수 있습니다.

만약 누군가가 이것을 하는 비효소적인 방법을 알고 있다면, 나는 여전히 그것에 대해 듣고 싶을 것이다.

저는 아래와 같이 동작했습니다.

expect(companySelect.find('input').props()["disabled"]).toBe(true)

props()는 실렉터의 모든 Atribute를 가진 객체를 반환하고 오브젝트로 참조할 수 있습니다.

이것도 도움이 됐으면 좋겠는데...

https://airbnb.io/enzyme/docs/api/ReactWrapper/props.html

@testing-library/jest-dom 라이브러리는 커스텀메처를 제공합니다.확장 후expect조문

import '@testing-library/jest-dom/extend-expect'

라고 단언할 수 있다

const rect = document.querySelector('[data-testid="my-rect"]')
expect(rect).toHaveAttribute('width', '256')

리액트 테스트 유틸리티 사용 시:

it('should have the logo image', () => 
  const app = TestUtils.renderIntoDocument(<App/>);
  var image = TestUtils.findRenderedDOMComponentWithTag(app, 'img');
  expect(image.getDOMNode().getAttribute('src')).toEqual('logo.svg');
});

효소 검사가 훨씬 깨끗해 보여요.

나에게 이것은 효과가 있었다.

expect(component.find('button').props().disabled).toBeTruthy();

.node가 동작하지 않습니다.어느 정도 열심히 작업한 결과, 다음은 상기의 질문에 대한 답변과 100% 관련되어 있음을 알 수 있었습니다.

  const src = img.getElement().props.src;

언급URL : https://stackoverflow.com/questions/41070895/how-do-i-get-an-attribute-of-an-element-nested-in-a-react-component-using-jest-a