jestjs - Stencil 组件上的 Jest 测试不应用变量更改

Question

我想像这样测试一个模板组件并在我的测试中配置一个全局变量:

describe('my-component', () => {
  const myVarMock = 1;

  let page;
  let shadowRoot: ShadowRoot;

  beforeEach(async () => {
    page = await newSpecPage({
      components: [MyComponent],
      html: `<my-component></my-component>`,
      supportsShadowDom: true,
      autoApplyChanges: true
    });
    shadowRoot = page.root.shadowRoot;
  });


  it('should test', () => {
    page.rootInstance.myVar= myVarMock;
    page.rootInstance.componentWillLoad();
    page.rootInstance.render();

    console.log(shadowRoot.innerHTML.toString());
    const buttonElement = shadowRoot.querySelector('.my-button'); //is null because shadow root is empty
  });
});

My Component 仅在设置 myVar 时呈现某些内容。在我的测试的 console.log 中，shadowRoot 始终为空，尽管我在测试中显式调用了 render() 并且当我在 Debug模式下通过渲染函数时它具有 myVar 的值并渲染所有内容。但为什么 shadowRoot 然后是空的，而我的 buttonElement 是未定义的？

组件:

@Component({
  tag: 'my-component',
  shadow: true,
})
export class MyComponent{

  public myVar;

  componentWillLoad() {
    ...
  }

    render() {
        return (
          <Host>
            {this.myVar? (
                 <div class="my-button"></div>
             ): null}
          </Host>
        )
    }
}

Answer 1

手动调用那些生命周期 Hook ，如 componentWillLoad 和 render 并没有达到我认为您期望的效果。 Stencil 运行时调用 render 并使用返回值 (JSX) 最终呈现您的组件。手动调用 render 不会渲染或重新渲染您的组件。事实上，它除了返回一些 JSX 给你之外什么都不做，但你没有对返回值做任何事情。

我认为你的情况的主要问题是 myVar 没有声明为 @Prop() 装饰器的属性。因此，即使您已将您的类成员标记为 public 并且能够从外部更改它，Stencil 也不会为您连接任何关于该 Prop 的内容。参见 https://stenciljs.com/docs/properties .

相反，您必须将其定义为:

@Prop() myVar?: number;

这样，每当您更新 prop 的值时，Stencil 都会重新渲染您的组件。

你的测试用例应该看起来像

it('should test', () => {
    page.root.myVar = myVarMock;

    console.log(shadowRoot.innerHTML.toString());
    const buttonElement = shadowRoot.querySelector('.my-button');

    expect(buttonElement).not.toBeNull();
});