Description
Hi folks,
@testing-library/angular's jest matcher doesn't recognize properties properly.
Environment:
Package.json
... "devDependencies": { "@angular-builders/jest": "15.0.0", "@angular-devkit/build-angular": "^15.1.1", "@angular/cli": "~15.1.1", "@angular/compiler-cli": "^15.1.0", "@briebug/jest-schematic": "^6.0.0", "@testing-library/angular": "^13.1.0", "@types/jest": "^29.2.5", "jest": "^28.1.3", "jest-preset-angular": "^12.2.4", "ts-jest": "^29.0.5", "typescript": "~4.9.4" } ...
Component
`
import { Component, Input } from '@angular/core';
@component({
selector: 'app-root',
template: <button (click)="decrement()">-</button> <span data-testid="count">Current Count: {{ counter }}</span> <button (click)="increment()">+</button>,
})
export class AppComponent {
@input() counter = 0;
increment() {
this.counter += 1;
}
decrement() {
this.counter -= 1;
}
}
**Test**
import { render, screen, fireEvent } from '@testing-library/angular';
import { AppComponent } from './app.component';
describe('Counter', () => {
test('should render counter', async () => {
await render(AppComponent, {
componentProperties: { counter: 5 },
});
expect(screen.getByText('Current Count: 5')).toBeInTheDocument();
});
test('should increment the counter on click', async () => {
await render(AppComponent, {
componentProperties: { counter: 5 },
});
fireEvent.click(screen.getByText('+'));
expect(screen.getByText('Current Count: 6')).toBeInTheDocument();
});
});
`
Output:
`
gcc-jest-processor: running ngcc
FAIL src/app/app.component.spec.ts
● Test suite failed to run
src/app/app.component.spec.ts:6:11 - error TS2769: No overload matches this call.
Overload 1 of 2, '(component: Type<AppComponent>, renderOptions?: RenderComponentOptions<AppComponent, typeof import("/home/saulo/www/sodexo/my-test-app/node_modules/@testing-library/dom/types/queries")> | undefined): Promise<...>', gave the following error.
Type '{ counter: number; }' is not assignable to type 'Partial<AppComponent>'.
Object literal may only specify known properties, and 'counter' does not exist in type 'Partial<AppComponent>'.
Overload 2 of 2, '(template: string, renderOptions?: RenderTemplateOptions<WrapperComponent, {}, typeof import("/home/saulo/www/sodexo/my-test-app/node_modules/@testing-library/dom/types/queries")> | undefined): Promise<...>', gave the following error.
Argument of type 'typeof AppComponent' is not assignable to parameter of type 'string'.
6 await render(AppComponent, {
~~~~~~~~~~~~~~~~~~~~~~
7 componentProperties: { counter: 5 },
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
8 });
~~~~~~
src/app/app.component.spec.ts:10:50 - error TS2339: Property 'toBeInTheDocument' does not exist on type 'JestMatchers<HTMLElement>'.
10 expect(screen.getByText('Current Count: 5')).toBeInTheDocument();
~~~~~~~~~~~~~~~~~
src/app/app.component.spec.ts:14:11 - error TS2769: No overload matches this call.
Overload 1 of 2, '(component: Type<AppComponent>, renderOptions?: RenderComponentOptions<AppComponent, typeof import("/home/saulo/www/sodexo/my-test-app/node_modules/@testing-library/dom/types/queries")> | undefined): Promise<...>', gave the following error.
Type '{ counter: number; }' is not assignable to type 'Partial<AppComponent>'.
Object literal may only specify known properties, and 'counter' does not exist in type 'Partial<AppComponent>'.
Overload 2 of 2, '(template: string, renderOptions?: RenderTemplateOptions<WrapperComponent, {}, typeof import("/home/saulo/www/sodexo/my-test-app/node_modules/@testing-library/dom/types/queries")> | undefined): Promise<...>', gave the following error.
Argument of type 'typeof AppComponent' is not assignable to parameter of type 'string'.
14 await render(AppComponent, {
~~~~~~~~~~~~~~~~~~~~~~
15 componentProperties: { counter: 5 },
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
16 });
~~~~~~
src/app/app.component.spec.ts:20:50 - error TS2339: Property 'toBeInTheDocument' does not exist on type 'JestMatchers<HTMLElement>'.
20 expect(screen.getByText('Current Count: 6')).toBeInTheDocument();
~~~~~~~~~~~~~~~~~
`