props jest 효소 ReactJS로 전달되는 문자열을 어떻게 테스트합니까?

2020-08-01 reactjs jestjs enzyme

Paragraph 요소에 표시 될 값을 테스트하고 싶습니다. 그래서 그렇게하기 위해 나는 농담 테스트에서 매개 변수로 값을 전달하고 단락에 동일한 값이 포함되어 있는지 확인하고 싶습니다. 구성 요소를 렌더링하고 콘솔에서 로그 아웃합니다 (아래 이미지 확인). 나는 개체 목록을 얻을 것이다. 그러나 올바른 data-testid에 액세스하고 거기에서 내용이 props 값과 일치하는지 확인하는 방법은 무엇입니까?

더 깨끗한 방법이 있다면 알려주세요!

여기에 이미지 설명 입력

// SelectedValues.test.js
it('should call check props value in SelectedValue component', () => {
    const vehicleProps = [ 'car' ]
    const brandProps = [ 'tesla' ]
    const colorProps = [ 'red' ]
    const component = render(<SelectedValues curSelectVehicle={vehicleProps} curSelectBrand={brandProps} curSelectColor={colorProps}/>);

    console.log(component.find('p'))
});

// SelectedValues.js
import React from 'react';
import { 
    HeadingOne, 
    Paragraph, 
    ValueContainer, 
    ValueBlock 
} from '../../styles/SelectOptions';

export const SelectedValues = ({
    curSelectVehicle,
    curSelectBrand,
    curSelectColor
}) => {
    return (
        <ValueContainer>
            <ValueBlock>
                <HeadingOne>Selected Vehicle</HeadingOne>
                <Paragraph data-testid="select-vehicle">{curSelectVehicle}</Paragraph>
            </ValueBlock>

            <ValueBlock> 
                <HeadingOne>Selected Brand</HeadingOne>
                <Paragraph data-testid="select-brand">{curSelectBrand}</Paragraph>
            </ValueBlock>

            <ValueBlock>
                <HeadingOne>Selected Color</HeadingOne>
                <Paragraph data-test-id="select-color">{curSelectColor}</Paragraph>
            </ValueBlock>
        </ValueContainer>
    )
}

Answers

Ciao, 여기 에 작동하는 예제가 있습니다 (제네릭 TestComponent 를 사용하고 Paragraph span 대신 사용했지만 동일합니다).

구성 요소에 적용되는 예는 다음과 같을 수 있습니다.

it('should call check props value in SelectedValue component', () => {
   const vehicleProps = [ 'car' ]
   const brandProps = [ 'tesla' ]
   const colorProps = [ 'red' ]
   const component = shallow(<SelectedValues curSelectVehicle={vehicleProps} curSelectBrand={brandProps} curSelectColor={colorProps}/>);

   const vehicle = component.findWhere(
      n => n.prop("data-testid") === "select-vehicle"
   );
   const brand = component.findWhere(
      n => n.prop("data-testid") === "select-brand"
   );
   const color = component.findWhere(
      n => n.prop("data-testid") === "select-color"
   );
   expect(vehicle.text()).toBe(vehicleProps[0]);    
   expect(brand.text()).toBe(brandProps[0]);
   expect(color.text()).toBe(colorProps[0]);
});
});

참고 : render 아닌 shallow 사용하여 findWhere in component 를 호출 findWhere .

Related