Saltar al contenido principal

API

[Traducción Beta No Oficial]

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

Angular Testing Library reexporta todo desde DOM Testing Library junto con el método render.

Las siguientes reexportaciones están modificadas para facilitar su uso con Angular:

  • Los eventos en fireEvent invocan automáticamente un ciclo de detección de cambios después de dispararse

  • Las consultas findBy invocan automáticamente un ciclo de detección de cambios antes de ejecutarse

  • Las funciones waitFor invocan automáticamente un ciclo de detección de cambios antes de ejecutar el callback

render​

Con Angular Testing Library, los componentes pueden renderizarse de dos formas: mediante su tipo o usando una plantilla.

Por defecto, render también importa el NoopAnimationsModule.

Type​

Para renderizar un componente, debes pasar su tipo al método render. Para componentes que no usan otras partes de tu aplicación (como módulos de diseño o servicios), renderizar puede ser tan simple como este ejemplo:

await render(AppComponent)

template​

Alternativamente al tipo de componente, puedes proporcionar una plantilla. Esto es obligatorio para directivas pero también aplicable a componentes, siendo incluso más útil. El tipo de la directiva (o componente) debe añadirse a imports (o declarations para componentes no standalone).

ejemplo con directiva:

await render('<div appSpoiler></div>', {
  declarations: [SpoilerDirective],
})

ejemplo con componente:

await render(
  '<app-component [value]="47" [otherValue]="anotherValue" (sendValue)="sendValue($event)"></app-component>',
  {
    declarations: [AppComponent],
    componentProperties: {
      anotherValue: 'valueOfAnotherProperty',
      sendValue: jest.fn(),
    },
  },
)
export async function render<ComponentType>(
  component: Type<ComponentType>,
  renderOptions?: RenderComponentOptions<ComponentType>,
): Promise<RenderResult<ComponentType, ComponentType>>
export async function render<WrapperType = WrapperComponent>(
  template: string,
  renderOptions?: RenderTemplateOptions<WrapperType>,
): Promise<RenderResult<WrapperType>>

Component RenderOptions​

inputs​

Objeto para configurar propiedades @Input o input() del componente.

valor predeterminado: {}

await render(AppComponent, {
  inputs: {
    counterValue: 10,
    // explicitly define aliases using `aliasedInput`
    ...aliasedInput('someAlias', 'someValue'),
  },
})

on​

Objeto con callbacks para suscribirse a EventEmitters y Observables del componente.

valor predeterminado: {}

// using a manual callback
const sendValue = (value) => { ... }
await render(AppComponent, {
  on: {
    send: (value) => sendValue(value),
  }
})

// using a (jest) spy
const sendValueSpy = jest.fn()

await render(AppComponent, {
  on: {
    send: sendValueSpy
  }
})

bindings​

Un arreglo de enlaces para aplicar al componente utilizando la API nativa de enlaces de Angular. Proporciona una forma más directa de vincular entradas y salidas en comparación con las opciones inputs y on. La API de enlaces utiliza las funciones inputBinding, outputBinding y twoWayBinding de @angular/core.

valor predeterminado: []

import { inputBinding, outputBinding, twoWayBinding, signal } from '@angular/core'

await render(AppComponent, {
  bindings: [
    // Bind a static input value
    inputBinding('greeting', () => 'Hello'),
    
    // Bind a signal as an input
    inputBinding('age', () => 25),
    
    // Two-way binding with a signal
    twoWayBinding('name', signal('John')),
    
    // Output binding with a callback
    outputBinding('submitValue', (event) => console.log(event)),
  ],
})

Uso de señales para actualizaciones reactivas:

const greetingSignal = signal('Good day')
const nameSignal = signal('David')
const ageSignal = signal(35)

const { fixture } = await render(AppComponent, {
  bindings: [
    inputBinding('greeting', greetingSignal),
    inputBinding('age', ageSignal),
    twoWayBinding('name', nameSignal),
  ],
})

// Update signals externally
greetingSignal.set('Good evening')

Manejo de salidas:

const submitHandler = jest.fn()

await render(AppComponent, {
  bindings: [
    outputBinding('submit', submitHandler),
  ],
})

declarations​

Colección de componentes, directivas y pipes necesarios para renderizar el componente, por ejemplo componentes anidados.

Más información en la documentación de Angular.

valor predeterminado: []

ejemplo:

await render(AppComponent, {
  declarations: [CustomerDetailComponent, ButtonComponent],
})

deferBlockBehavior​

Configura el comportamiento de los bloques diferidos.

Más información en la documentación de Angular

valor por defecto : undefined (usa DeferBlockBehavior.Manual, que difiere del valor predeterminado de Angular DeferBlockBehavior.Playthrough)

ejemplo:

await render(AppComponent, {
  deferBlockBehavior: DeferBlockBehavior.Playthrough,
})

deferBlockStates​

Configura el estado inicial de bloques diferibles en un componente.

Más información en la documentación de Angular

valor por defecto : undefined (usa el valor predeterminado de Angular: DeferBlockState.Placeholder)

ejemplo:

await render(FixtureComponent, {
  deferBlockStates: DeferBlockState.Loading,
})

componentProviders​

Colección de proveedores necesarios para la inyección de dependencias.

Estos se proporcionan a nivel de componente. Para inyectar dependencias a nivel de módulo, usa providers.

Más información en la documentación de Angular.

valor predeterminado: []

ejemplo:

await render(AppComponent, {
  componentProviders: [AppComponentService],
})

componentImports​

Colección de imports para sobrescribir las importaciones de un componente standalone.

valor predeterminado: undefined

ejemplo:

await render(AppComponent, {
  componentImports: [MockChildComponent],
})

childComponentOverrides​

Colección de proveedores específicos para sobrescribir en componentes hijos.

valor predeterminado: undefined

ejemplo:

await render(AppComponent, {
  childComponentOverrides: [
    {
      component: ChildOfAppComponent,
      providers: [{provide: ChildService, useValue: {hello: 'world'}}],
    },
  ],
})

detectChangesOnRender​

Invoca detectChanges después de renderizar el componente.

valor predeterminado: true

ejemplo:

await render(AppComponent, {detectChangesOnRender: false})

autoDetectChanges​

Detecta cambios automáticamente como lo haría un componente en ejecución real. Por ejemplo, ejecuta un ciclo de detección de cambios después de ocurrir un evento.

valor predeterminado: true

ejemplo:

await render(AppComponent, {
  autoDetectChanges: false,
})

excludeComponentDeclaration​

Excluye la declaración automática del componente. Necesario cuando el componente está declarado en un módulo importado, como en SCAMs.

valor predeterminado: false

ejemplo:

await render(AppComponent, {
  imports: [AppModule], // a module that includes AppComponent
  excludeComponentDeclaration: true,
})

imports​

Colección de imports necesarios para renderizar el componente, por ejemplo módulos compartidos. Añade NoopAnimationsModule por defecto si BrowserAnimationsModule no está incluido.

Para más información consulta la documentación de Angular.

valor predeterminado: [NoopAnimationsModule]

ejemplo:

await render(AppComponent, {
  imports: [AppSharedModule, MaterialModule],
})

providers​

Colección de proveedores necesarios para la inyección de dependencias.

Se proveerán a nivel de módulo. Para inyección a nivel de componente, usa componentProviders.

Para más información consulta la documentación de Angular.

valor predeterminado: []

ejemplo:

await render(AppComponent, {
  providers: [
    CustomersService,
    {
      provide: MAX_CUSTOMERS_TOKEN,
      useValue: 10,
    },
  ],
})

queries​

Consultas a vincular. Sobrescribe el conjunto predeterminado de DOM Testing Library a menos que se fusionen.

valor predeterminado: undefined

ejemplo:

await render(AppComponent, {
  queries: {...queries, ...customQueries},
})

routes​

Configuración de rutas para inicializar el servicio de router mediante RouterTestingModule.withRoutes. Para más información consulta la documentación de rutas en Angular.

valor predeterminado: []

ejemplo:

await render(AppComponent, {
  declarations: [ChildComponent],
  routes: [
    {
      path: '',
      children: [
        {
          path: 'child/:id',
          component: ChildComponent,
        },
      ],
    },
  ],
})

schemas​

Colección de esquemas necesarios para renderizar el componente. Valores permitidos: NO_ERRORS_SCHEMA y CUSTOM_ELEMENTS_SCHEMA.

Para más información consulta la documentación de Angular.

valor predeterminado: []

ejemplo:

await render(AppComponent, {
  schemas: [NO_ERRORS_SCHEMA],
})

removeAngularAttributes​

Elimina los atributos de Angular (ng-version, root-id) del fixture.

valor predeterminado: false

ejemplo:

await render(AppComponent, {
  removeAngularAttributes: true,
})

componentInputs (obsoleto)​

Un objeto para establecer las propiedades @Input del componente. Utiliza setInput para asignar la propiedad de entrada. Lanza un error si la propiedad del componente no está anotada con el atributo @Input.

valor predeterminado: {}

ejemplo:

await render(AppComponent, {
  componentInputs: {
    counterValue: 10,
  },
})

componentOutputs (obsoleto)​

Un objeto para establecer las propiedades @Output del componente.

valor predeterminado: {}

ejemplo:

await render(AppComponent, {
  componentOutputs: {
    clicked: (value) => { ... }
  }
})

componentProperties (obsoleto)​

Un objeto para establecer propiedades @Input y @Output del componente. No ofrece control granular como inputs y on.

valor predeterminado: {}

ejemplo:

await render(AppComponent, {
  componentProperties: {
    // an input
    counterValue: 10,
    // an output
    send: (value) => { ... }
    // a public property
    name: 'Tim'
  }
})

RenderResult​

container​

El nodo DOM contenedor de tu componente Angular renderizado. Es un nodo DOM normal, por lo que puedes usar container.querySelector etc. para inspeccionar los elementos hijos.

debug​

Imprime el DOM del componente con resaltado de sintaxis. Acepta un parámetro opcional para imprimir un nodo DOM específico.

const {debug} = await render(AppComponent)

debug()

rerender​

Cambia las propiedades de entrada de la instancia existente del componente siguiendo los eventos del ciclo de vida de Angular (se llama a ngOnChanges). Las propiedades de entrada no definidas se borran.

const {rerender} = await render(Counter, {
  inputs: {count: 4, name: 'Sarah'},
})

expect(screen.getByTestId('count-value').textContent).toBe('4')
expect(screen.getByTestId('name-value').textContent).toBe('Sarah')

await rerender({
  inputs: {count: 7}
})

// count is updated to 7
expect(screen.getByTestId('count-value').textContent).toBe('7')
// name is undefined because it's not provided in rerender
expect(screen.getByTestId('name-value').textContent).toBeUndefined()

Usando partialUpdate, solo se actualizarán las propiedades recién proporcionadas. Otras propiedades de entrada no proporcionadas no se borrarán.

const {rerender} = await render(Counter, {
  inputs: {count: 4, name: 'Sarah'},
})

expect(screen.getByTestId('count-value').textContent).toBe('4')
expect(screen.getByTestId('name-value').textContent).toBe('Sarah')

await rerender({inputs: {count: 7}, partialUpdate: true})

// count is updated to 7
expect(screen.getByTestId('count-value').textContent).toBe('7')
// name is still rendered as "Sarah" because of the partial update
expect(screen.getByTestId('name-value').textContent).toBe('Sarah')

detectChanges​

Dispara un ciclo de detección de cambios para el componente.

Para más información consulta la documentación de Angular.

debugElement​

El DebugElement de Angular del componente.

Para más información consulta la documentación de Angular.

fixture​

El ComponentFixture de Angular del componente.

Para más información consulta la documentación de Angular.

const {fixture} = await render(AppComponent)

// componentInstance is typed as AppComponent
const componentInstance = fixture.componentInstance

🚨 Si usas fixture para acceder a valores internos del componente, ¡reconsidera! Esto probablemente significa que estás probando detalles de implementación.

Acepta un elemento DOM o una ruta como parámetro. Si se pasa un elemento, navigate navegará al valor href del elemento. Si se pasa una ruta, navigate navegará a esa ruta.

const { navigate } = await render(AppComponent, {
  routes: [...]
})

await navigate(component.getByLabelText('To details'))
await navigate('details/3')

...queries​

La característica más importante de render es que las consultas de DOM Testing Library se devuelven automáticamente con su primer argumento vinculado al componente bajo prueba.

Consulta Queries para ver la lista completa.

ejemplo:

const {getByText, queryByLabelText} = await render(AppComponent)

screen.getByRole('heading', {
  name: /api/i,
})
queryByLabelText(/First name/i')

renderDeferBlock​

Para probar vistas diferidas, puedes usar renderDeferBlock. renderDeferBlock establecerá el estado diferido deseado para un bloque diferible específico. El valor predeterminado de una vista diferida es Placeholder, pero también puedes establecer el estado inicial al renderizar el componente.

const {renderDeferBlock} = await render(FixtureComponent, {
  deferBlockStates: DeferBlockState.Loading,
})

expect(screen.getByText(/loading/i)).toBeInTheDocument()

await renderDeferBlock(DeferBlockState.Complete)
expect(screen.getByText(/completed/i)).toBeInTheDocument()