Media img test

de la manera como yo lo hice, validando que sea requerido alt y src directamente con los PropTypes

MediaImg.propTypes = {
    ...
    src: PropTypes.string.isRequired,
    alt: PropTypes.string.isRequired,
}

pensé que no era necesario añadirlo al testing pero me di cuenta que esta forma es mucho mejor

expect(MediaImgTest).toBeInTheDocument();
expect(MediaImgTest).toHaveAttribute('src', 'https://www.algo.com/img')
expect(MediaImgTest).toHaveAttribute('alt')

en el mismo testing podemos ver todo sin estar navegando entre archivos y no solamente podemos controlar la prop que recibe y el tipo de valor, incluso podemos controlar el valor exacto que recibimos si así lo queremos.

Mi solución al reto:

it('testeando border radius, width and height',()=>{
const {getByRole} = render(<MediaImg src='https://davc93.github.io' alt='PlatziCool'/>)
const MediaImgTest = getByRole('img');
expect(MediaImgTest).toHaveStyle("width:100px;height:100px;border-radius:16px;");
})

para utilizar ‘toBeInTheDocument()’ tuve que importar

import '@testing-library/jest-dom/

Mi solución al reto

it('Probar que el width y height sean 200px y border-radius 8px', () => {
    //arrange
    const { getByRole } = render(
      <MediaImg
        alt="PlatziCoolImg"
        src="https://www.platziversosupercool.com/img"
        width="200px"
        height="200px"
        borderRadius="8px"
      />
    );
    //act
    const MediaImgTest = getByRole('img');
    //assert
    expect(MediaImgTest).toHaveStyle(
      'width:200px;height:200px;border-radius:8px;'
    );
  });

Mi solucion

describe('@Components/MediaImg', () => {
  it('should have correct styles', () => {
    //arrange
    const { baseElement } = render(<MediaImg data-testid="media-img" src="img.com/dsads" alt="Platzinauta" />);
    //act
    const mediaImg = getByTestId(baseElement, 'media-img');
    const mediaImgStyles = getComputedStyle(mediaImg);
    //assert
    expect(mediaImgStyles.width).toBe('100px');
    expect(mediaImgStyles.height).toBe('100px');
    expect(mediaImgStyles.borderRadius).toBe('10%');
  });
});