Как проверить строку, которая передается как фермент props jest ReactJS - PullRequest
Новая
       31

Как проверить строку, которая передается как фермент props jest ReactJS

1 голос
/ 01 августа 2020

Я хочу проверить значение, которое будет отображаться в элементе Paragraph . Поэтому для этого я хочу передать значение в качестве параметра при тестировании шутки, а затем проверить, содержит ли абзац то же значение. Когда я визуализирую компонент и консоль, выйдите из системы (см. Изображение ниже). Я получу список объектов. Но как я могу получить доступ к нужному data-testid и оттуда получить контент, чтобы увидеть, соответствует ли оно значению props.

Если есть более чистый способ сделать это, дайте мне знать!

enter image description here

// 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>
    )
}

1 Ответ

2 голосов
/ 01 августа 2020

Ciao, здесь рабочий пример (я использовал generi c 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]);
});
});

Примечание: я использовал shallow, а не render, чтобы вызвать findWhere в component.

...