CODEWITHSUNDEEP
reactjsjestjsenzyme
Frontend employee
Frontend employee

Reputation: 729

How do I test string that is being passed as props jest enzyme ReactJS

I want to test the value that will be shown in the Paragraph element. So in order to do that I want to pass the value as a parameter in jest testing and then check if the paragraph contains the same value. When I render the component and console log that out (check image below). I will get a list of objects. But how can I access to the right data-testid and from there get the content to see if that matches with the props value.

If there is a cleaner way to do that then let me know too!

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

Upvotes: 1

Views: 1973

Answers (1)

Giovanni Esposito
Giovanni Esposito

Reputation: 11156

Ciao, here a working example (I used a generic TestComponent and instead of Paragraph span but it's the same).

The example applied for your component could be something like:

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]);
});
});

Note: I used shallow, not render, to call findWhere in component.

Upvotes: 2

Related Questions