Rerender with template throws "Cannot redefine property"

[rothsandro]

Steps to reproduce

1. Create a new Angular 12 project
2. Install testing library
3. Add a new test that renders a template with componentProperties
4. Call "rerender" with an updated property value

const { rerender, getByText } = await render(`<div>Hello {{ name}}</div>`, {
  componentProperties: {
    name: 'Sarah',
  },
});

getByText('Hello Sarah');
rerender({ name: 'Mark' });  // Throws the error
getByText('Hello Mark');});

Expected behavior

The template should be updated with the new value

Actual behavior

The following error is thrown:

TypeError: Cannot redefine property: name

Cause

The function setComponentProperties which is called during initial render and during rerender uses Object.defineProperty. As configurable is false by default (see MDN) this cannot be called twice and throws the error above on rerender.

The function should set configurable: true.

Demo

https://github.com/rothsandro/ng-tlib-template-rerender/blob/main/src/app/rerender-template.spec.ts

[timdeschryver]

@rothsandro thanks for the detailed info!
If you want, feel free to create a Pull Request with the needed changes.
The proposition seems fine to me.

[rothsandro]

@timdeschryver Thanks. Yes, I can create a PR.

I already started creating a test case for that before fixing it but it seems that Jest has configurable true by default (vs. false with Karma and a real browser) so the test does not fail :-( Should I just fix this without a new test case?

[timdeschryver]

@rothsandro oh, good to know.
If you add a comment why we do it, then that's fine.
Perhaps that we should create some karma tests for safety in the future...