No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Compra acceso a todo Platzi por 1 a帽o

Antes: $249

Currency
$209/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Suscr铆bete

Termina en:

15D
22H
40M
54S

Media img test

9/15
Recursos

Aportes 5

Preguntas 0

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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 鈥榯oBeInTheDocument()鈥 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%');
  });
});