Button test
Clase 5 de 15 • Curso de Creación de Librerías UI para React
Contenido del curso
Juan Camilo Lentino Villalba
student•
hace 4 años
Diego Vergara
student•
hace 4 años
Clase 5 de 15 • Curso de Creación de Librerías UI para React
Contenido del curso
Juan Camilo Lentino Villalba
Diego Vergara
Gilbert Ardila
Daniel Rodrigo Valdivieso Merino
Eduardo Lemus Zavala
en mi caso, para que todo pueda correr bien y pase el test, a la hora de desestructurar las props añadir ...otherProps
const { className, bgColor, color, width, height, colorHover, bgColorHover, borderRadius, ...otherProps } = props
el archivo completo quedaría de esta forma src/Button/Button.js:
import { forwardRef } from 'react' import { cx, css } from "@emotion/css"; import { PropTypes } from 'prop-types' const buttonStyles = (bgColor, color, width, height, colorHover, bgColorHover, borderRadius)=> css` background-color: ${bgColor}; color: ${color}; border-radius: ${borderRadius || '8px'}; width: ${width || '40px'}; height: ${height || '150px'}; text-align: center; &:hover { background-color: ${bgColorHover}; color: ${colorHover}; } ` const Button = forwardRef((props, ref)=> { const { className, bgColor, color, width, height, colorHover, bgColorHover, borderRadius, ...otherProps } = props return ( <button ref={ref} type="button" {...otherProps} className={cx(buttonStyles(bgColor, color, width, height, colorHover, bgColorHover, borderRadius), className)} /> ) }) Button.propTypes = { className: PropTypes.string, bgColor: PropTypes.string, color: PropTypes.string, width: PropTypes.string, height: PropTypes.string, bgColorHover: PropTypes.string, colorHover: PropTypes.string, borderRadius: PropTypes.string } export default Button
Me paso igual, faltaba agregar ese.
soy nuevo en esto del test y traté de testear el color de la siguiente manera :
< test('Should have bgColor', () => { const {getByRole} = render(<Button color='blue' type='button'/>); const buttonTest = getByRole('button'); expect(buttonTest.style.color).toBe('blue'); })>
pero me arroja este error:
< expect(received).toBe(expected) // Object.is equality Expected: "blue" Received: "" 13 | const {getByRole} = render(<Button color='blue' type='button'/>); 14 | const buttonTest = getByRole('button'); > 15 | expect(buttonTest.style.color).toBe('blue'); | ^ 16 | }) 17 | });>
una ayuda me vendría bien
Prueba revisar el componente para ver si lo que sucede es que hay algun error como tal en el componente, hay momentos en los que el error en un test es el mismo componente.
Si el test está bien creado el error esta en el componente, para eso creamos los test, para de una u otra forma para romper nuestros componentes para preveer los errores y corregir el componentes antes de que vaya a producción.
Agregue la siguiente línea de código, pues no me reconocía los métodos de toHaveClass y toHaveStyle:
import { toHaveClass,toHaveStyle } from '@testing-library/jest-dom';