Jest-preset-angular: @Input() bindings are not reflected within template snapshot

[Hotell]

Versions used:

yarn list v1.3.2
├─ @angular/[email protected]
├─ [email protected]
└─ [email protected]

Not sure if it's related to this jest preset but wanted to report anyway for anyone else looking for solution, if there is any....

Let's have a component

@Component({
  selector: 'pizza-item',
  template: `
     <h3>{{pizzaName}}</h3>    
    <ul><li *ngFor="let toppingName of toppings">{{toppingName}}</li></ul>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class PizzaItemComponent {
  @Input name = ''
  @Input toppings: string[] = []
}

with test:

describe('PizzaItemComponent', () => {
  let component: PizzaItemComponent;
  let fixture: ComponentFixture<PizzaItemComponent>;

  beforeEach(
    async(() => {
      TestBed.configureTestingModule({
        declarations: [PizzaItemComponent],
      }).compileComponents();
    })
  );

  beforeEach(() => {
    fixture = TestBed.createComponent(PizzaItemComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  it(`should snapshot pizza name @Input`, () => {
    expect(fixture).toMatchSnapshot();

    component.name = 'Chilli pizza';

    fixture.detectChanges();
    expect(fixture).toMatchSnapshot();
  });

  it(`should reflect toppings @Input() via *ngFor`, () => {
    component.toppings = ['first'];
    fixture.detectChanges();

    expect(fixture).toMatchSnapshot();

    component.toppings = ['anchovy', 'tomato', 'chili'];
    fixture.detectChanges();

    expect(fixture).toMatchSnapshot();
  });
});

none of @Input are reflected within the snapshot

Snapshots:

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`PizzaItemComponent should reflect toppings @Input() via *ngFor 1`] = `
<pizza-item
  name=""
  toppings={[Function Array]}
>
       <h3>
  </h3>
      <ul>
  </ul>
</pizza-item>
`;

exports[`PizzaItemComponent should reflect toppings @Input() via *ngFor 2`] = `
<pizza-item
  name=""
  toppings={[Function Array]}
>
       <h3>
  </h3>
      <ul>
  </ul>
</pizza-item>
`;

exports[`PizzaItemComponent should snapshot pizza name @Input 1`] = `
<pizza-item
  name=""
  toppings={[Function Array]}
>
       <h3>
  </h3>
      <ul>
  </ul>
</pizza-item>
`;

exports[`PizzaItemComponent should snapshot pizza name @Input 2`] = `
<pizza-item
  name={[Function String]}
  toppings={[Function Array]}
>
       <h3>
  </h3>
      <ul>
  </ul>
</pizza-item>
`;

@Input() are rendered only if they are set as default values @Input() name = 'hello' otherwise bindings are not reflected at all

Any suggestions ?

[yurii-sorokin]

It's not a problem of the snapshot serializer, it's because of change detection strategy. Look here for details.

TL;DR: Wrap your component under test into some container component with default change detection strategy and pass props through it or overwrite change detection strategy with TestBed if not critical for the test.

[thymikee]

Can we close this then?

[Hotell]

Oh! you're a life saver @yurii-sorokin thanks so much ! I'll add this to the docs as well. cheers all !