Estoy investigando sobre hacer pruebas a componentes react con jest, y por lo que he visto solo se puede si el componente es una clase y no una función entonces mi pregunta es:
se pueden hacer pruebas a un componente react como función con jest?
Claro que se puede. Primero que nada, quiero aclarar dos cosas. Si se pueden hacer pruebas de un componente funcional con Jest, pero no por si sólo, necesitas alguna biblioteca para hacer render de los componentes como @testing-library, enzyme o similares.
Así mismo Jest es sólo un framework para pruebas y es posible hacer pruebas de componentes con cualquier otro framework como Tape o Mocha. Aquí te dejo un pequeño ejemplo de código que hice de un botón. Cabe destacar que usé create-react-app para iniciar este ejemplo y la configuración de Jest ya estaba lista.
Button.js
import React from 'react';
import PropTypes from 'prop-types';
function Button({ disabled, type, children }) {
const classes = type ? `button__${type}` : '';
return (
<button className={`button ${classes}`} disabled={disabled}>
{children}
</button>
);
}
Button.propTypes = {
type: PropTypes.oneOf(['primary', 'secondary'])
}
export default Button;
Button.test.js
Aquí probamos diferentes cosas como el atributo disabled
y que el botón contenga una clase específica basado en alguna `prop.
import React from 'react';
import { render, screen } from '@testing-library/react';
import Button from './Button';
describe('<Button />', () => {
function setup(text, props = {}) {
const { container, getByText } = render(
<Button {...props}>
{text}
</Button>
);
const button = container.firstChild;
return { button, container, getByText };
}
test('render normal', () => {
const { button, container, getByText } = setup('Boton', {});
expect(button.classList.contains('button')).toBe(true);
expect(getByText('Boton')).toBeInTheDocument();
});
test('render de tipo "primary"', () => {
const { button, container, getByText } = setup('Primary', { type: 'primary' });
expect(button.classList.contains('button__primary')).toBe(true);
expect(getByText('Primary')).toBeInTheDocument();
});
test('render de tipo "secondary"', () => {
const { button, container, getByText } = setup('Secondary', { type: 'secondary' });
expect(button.classList.contains('button__secondary')).toBe(true);
expect(getByText('Secondary')).toBeInTheDocument();
});
test('render con atributo "disabled"', () => {
const { button, container, getByText } = setup('Deshabilitado', { disabled: true });
expect(button.hasAttribute('disabled')).toBe(true);
expect(button).toHaveClass('button');
expect(getByText('Deshabilitado')).toBeInTheDocument();
});
});