Actualmente estoy tratando de escribir una prueba para probar qué hay dentro de componentes de orden superior
mi prueba así:
let Component = withEverything(Header); let wrapper; it('renders correctly', async () => { wrapper = await mountWithSleep( <Component componentProps={{ session: { id: '2' } }} />, 0.25 ); console.log(wrapper.debug()); }); });genera lo siguiente:
<Component> <WithSession component={[Function: GlobalNav]} innerProps={{...}} /> </Component>Mi archivo de sesión tiene el siguiente aspecto:
import React, { Component, ComponentType } from 'react'; import { Session, session } from '@efa/web/src/modules/auth/authService'; import { Omit } from '@everlutionsk/helpers'; import { Subscription } from 'rxjs'; class WithSession extends Component<Props, State> { state: State = { session: undefined }; private subscription: Subscription; componentDidMount() { this.subscription = session.subscribe(session => { this.setState({ session }); }); } componentWillUnmount() { this.subscription.unsubscribe(); } render() { if (this.state.session === undefined) return null; const Component = this.props.component; const props = { ...this.props.innerProps, session: this.state.session }; return <Component {...props} />; } } /** * Injects a current session to the given [component]. */ export function withSession<P extends SessionProps>( component: ComponentType<P> ): ComponentType<Omit<P, keyof SessionProps>> { return props => <WithSession component={component} innerProps={props} />; } export interface SessionProps { readonly session: Session | null; } interface Props { readonly component: ComponentType; readonly innerProps: any; } interface State { readonly session: Session | null | undefined; }He intentado hacer un jest.mock que me ayuda a usar esto:
jest.mock('@efa/web/src/modules/auth/components/withSession', () => { //@ts-ignore const original = jest.requireActual( '@efa/web/src/modules/auth/components/withSession' ); return { __esModule: true, ...original, withSession: component => { return component; } }; });Usando este módulo, al menos puedo ver un componente devuelto en lugar de una sesión. Pero ahora el problema es que necesito poder establecer el estado de la sesión. preguntando si alguien puede ayudar?!
Vale la pena señalar que este es un proyecto que heredamos, ¡no lo implementaría de esta manera nunca!
Tiene razón en que este tipo de código hace que las pruebas sean absolutamente más difíciles. La "mejor" manera en este caso es probablemente un poco de trabajo porque la mejor manera de hacerlo sería cambiar esto al contexto; y luego agregue opciones a su método de montaje del marco de prueba para completar ese contexto como desee de las pruebas individuales. Sin embargo, puede alcanzar algo similar con los HOC antiguos.
Hay una forma más económica, y sería permitir que se pasen opciones a withEverything (si la aplicación también lo usa, puede crear un espejo llamado withTestHocs o similar. Es decir,
withTestHocs(Header, { session: //... object here }) Internamente, este HOC ya no llamaría withSession absoluto. En cambio, llamaría a un HOC cuyo único propósito es inyectar ese objeto de configuración de sesión en el componente por razones de prueba.
No hay razón para hacer burlas complejas para obtener la sesión correcta en cada prueba, es una pérdida de tiempo. Solo necesita eso si realmente está probando con la propia withSession . Aquí debe priorizar su API de marco de prueba que hace que tener una sesión personalizada por prueba sea agradable y simple. jest.mock no se parametriza fácilmente, por lo que en sí mismo también es otra buena razón para no seguir ese camino. Nuevamente, la excepción es cuando está probando unitariamente la sesión real, pero esas pruebas suelen ser bastante complicadas y no usarán el "marco de prueba HOC" central que usará para todo su código de función/zona de usuario, que es en lo que me estoy enfocando aquí.
Tenga en cuenta que con esta solución, ya no necesitará la burla compleja (siempre que todas las pruebas se hayan movido a la nueva forma).
export const withEverything = (Component, {session}) => ({ providerProps, componentProps }) => ( <MockedProvider {...providerProps}> <BrowserRouter> <FlashMessage> <Component {...componentProps} session={session} /> </FlashMessage> </BrowserRouter> </MockedProvider> );Ahora en tu prueba
it('renders correctly', async () => { wrapper = await mountWithSleep( const withEverything(Header, { session: { id: '2' }}), 0.25 ); console.log(wrapper.debug()); });Si necesita poder manipular la sesión a mitad de la prueba, puede hacerlo devolviendo un método de withEverthing que permita configurar la sesión, pero no estoy seguro de si lo necesita.