在 Stencil with Jest 中，如何使用模板测试组件上的对象属性？

如何解决在 Stencil with Jest 中，如何使用模板测试组件上的对象属性？

我有一个看起来像这样的模板组件：

    export class MyBadge {
      @Prop() skin: string = 'primary';
      render(){
        return (
        <span class={`skin-${this.skin}`} />
      )

我想编写一个单元测试来检查呈现的组件是否应用了给定的 skin 属性。 我有一个测试，使用 expect(page.root).toEqualHtml(´< span class=primary >´). 将呈现的组件与我预期的 html 进行比较。此测试有效！但是，当我尝试使用模板修改道具时，它无法运行测试。

    import { newSpecPage } from '@stencil/core/testing';
    import { MyBadge } from './my-badge'
    it('should have "secondary" skin',async () => {
     const page = newSpecPage({
            components: [MyBadge],template: () => (`
              <my-badge skin=secondary></my-badge>
              `),});
          expect(page.root).toEqualHtml(`
          <span class="skin-secondary">
          ...
          `);
        });

这给出了错误 expect toEqualHtml() value is "null" 并且测试失败

我也尝试在 it 下包含波纹管 html，但也失败了。

html: `<my-badge></my-badge>`,

删除模板选项使测试工作，但它不会看到更新的道具。

我想根据这个答案使用模板选项： https://github.com/ionic-team/stencil/issues/1923

我也尝试了几种不同的语法，我不清楚如何包装模板字符串。

我一直在寻找有关此的文档，但似乎找不到我要找的内容。任何帮助将不胜感激！

编辑：根据@Simon Hänisch 的建议清理了代码

解决方法

您的模板返回的是字符串，而不是 JSX。您基本上会得到一个包含 <badge skin=secondary></badge> 作为字符串的文档，而不是实际的 badge 元素。

顺便说一句，badge 不是有效的自定义元素名称，它的名称中需要有一个破折号 (-)。您的示例代码中也存在语法错误，就像您的组件应该

return (
  <span class={`skin-${this.skin}`} />
)

（缺少类字符串的反勾号且标签未关闭）

假设所有这一切都只是编写此问题时的错误，并且您的代码中实际上有一行带有 newSpecPage 的行（此处也没有），您需要执行以下操作：

1. 将规范测试文件的扩展名更改为 .tsx。
2. 添加import { h } from '@stencil/core';。
3. 编写一些实际的 JSX 作为模板的返回值。

import { h } from '@stencil/core';
import { newSpecPage } from '@stencil/core/testing';
import { MyBadge } from './my-badge';

it('should have "secondary" skin',async () => {
  const page = newSpecPage({
    components: [MyBadge],template: () => <my-badge skin="secondary" />,});

  expect(page.root).toEqualHtml('<span class="skin-secondary"></span>');
});

您不能同时使用选项 template 和 html（或者至少没有意义，我不确定哪个优先），因为它们是设置页面内容的不同方式。如果你使用template，你可以直接使用JSX语法将任何类型的值绑定到props等。如果你使用html，它必须是一个包含页面html内容的字符串，并且在在这种情况下，您只能将字符串值绑定到道具。

如果您想在示例中使用 html，则需要

const page = newSpecPage({
  components: [MyBadge],html: `<my-badge skin="secondary"></my-badge>`,});

我认为在这种情况下您不能使用自闭合语法，因为它对自定义元素无效，请参阅 this answer。