No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Container test

7/15
Recursos

Aportes 3

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Mi solución al reto.

    it('Comprobar si tiene background azul',() => {
        // arrange

        const { getByRole } = render(
            <ContainerFlex role='banner' bgColor='blue' />
        )
        // act

        const ContainerFlexTest = getByRole('banner')
        // assert
        expect(ContainerFlexTest).toHaveStyle('background-color:blue;');
    })

bgcolor incorrecto

import { render } from "@testing-library/react";
import ContainerFlex from "./ContainerFlex";

describe('@components/ContainerFlex', ()=> {
    it('mensaje', ()=> {
        // arrange
        const { getByRole } = render(
            <ContainerFlex bgcolor={3} justifyContent="center" role="banner" />
        )
        
        // act 
        const ContainerFlexTest = getByRole('banner')

        // assert
        expect(ContainerFlexTest).toBeDefined();

    })
})


justifyContent incorrecto

import { render } from "@testing-library/react";
import ContainerFlex from "./ContainerFlex";

describe('@components/ContainerFlex', ()=> {
    it('mensaje', ()=> {
        // arrange
        const { getByRole } = render(
            <ContainerFlex bgcolor="red" justifyContent="red" role="banner" />
        )
        
        // act 
        const ContainerFlexTest = getByRole('banner')

        // assert
        expect(ContainerFlexTest).toBeDefined();

    })
})


bgcolor y justifyContent incorrecto

import { render } from "@testing-library/react";
import ContainerFlex from "./ContainerFlex";

describe('@components/ContainerFlex', ()=> {
    it('mensaje', ()=> {
        // arrange
        const { getByRole } = render(
            <ContainerFlex bgcolor={3} justifyContent="red" role="banner" />
        )
        
        // act 
        const ContainerFlexTest = getByRole('banner')

        // assert
        expect(ContainerFlexTest).toBeDefined();

    })
})


bgcolor y justifyContent correctos

import { render } from "@testing-library/react";
import ContainerFlex from "./ContainerFlex";

describe('@components/ContainerFlex', ()=> {
    it('mensaje', ()=> {
        // arrange
        const { getByRole } = render(
            <ContainerFlex bgcolor="red" justifyContent="center" role="banner" />
        )
        
        // act 
        const ContainerFlexTest = getByRole('banner')

        // assert
        expect(ContainerFlexTest).toBeDefined();

    })
})

Asi resolví el reto 😃

import { render } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import ContainerFlex from './ContainerFlex';

describe('@componets/ContainerFlex', () => {
 
  it('Comprobar si tiene fondo azul', () => {
    // arrange

    const { getByRole } = render(
      <ContainerFlex role="banner" bgColor="blue" />
    );
    // act

    const ContainerFlexTest = getByRole('banner');
    // assert
    expect(ContainerFlexTest).toHaveStyle('background-color:blue;');
  });
});