Creé una aplicación React simple y necesito agregar el componente de botón. Lamentablemente mi código no funciona. ¿Cómo puedo arreglarlo? Botón de realización (Reaccionar):
import React from 'react'; const Button = (props) => { return <button className="button"> {props.children} </button>; } export { Button };Código de prueba:
import React from 'react'; import { shallow } from 'enzyme'; import Button from './Button'; describe('Button', () => { /** * children - button text */ it('Button with text', () => { const component = shallow(<Button>Button</Button>); expect(component.html()).toEqual('<button class="button">Button</button>'); }); });Error en la prueba:
Expected: "<button class=\"button\">Button</button>" Received: null¿Puedes probar esto, por favor?
it('Button with text', () => { const component = shallow(<Button>Button</Button>); expect(component.html()).toEqual('<button class=\"button\">Button</button>'); });Esta línea de importación:
import Button from './Button';le está pidiendo a la compilación que obtenga la exportación predeterminada del módulo, pero está exportando ese componente dentro de un objeto.
Así que:
export default Button;O:
import { Button } from './Button';(También sugeriría agregar paréntesis alrededor de su JSX en su devolución e importar algunos CSS específicos para ese componente).
function Button(props) { return ( <button className="button"> {props.children} </button>; ); } export default Button;