Javascript 如何在使用jest测试组件时以选择器的第一个子级为目标

如果使用

jest

和

vue-test-utils

在HTML中正确传递了一个默认的道具，那么我将尝试编写一个测试。我似乎找不到我的目标选择器。我希望能够测试特定的

p

标记是否包含正确的文本。在本例中，如果传递了名称道具，它将呈现该名称道具。如果不是，则默认函数将呈现默认的

payTo

值

我尝试了几种链接到包装器的组合，但都没有效果

console.log(wrapper.html()) // presents all the page html

以下是我的组件：

<template>
  <div class="row-space-between">
    <div>
      <h3>{{ $t('label.payTo') }}</h3>
      <p>{{ merchantName.payTo }}</p> // TARGET SELECTOR
    </div>
    <div class="align-right">
      <h3>{{ $t('label.estimatedTotal') }}</h3>
      <p>{{ amount }}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PayTo',
  props: {
    'merchant-name': {
      type: Object,
      // default: {} with type obj or arr default function is required
      default: function () {
        return { merchantName: {
          payTo: 'Order Total'
         }
       }
    },
    amount: {
      type: String,
      default: ''
    }
  }
}

这里可以使用伪类：

expect(wrapper.contains("div:first-child > p")).toBeTruthy()

我还要验证

p

中的文本是否与预期值匹配：

expect(wrapper.find("div:first-child > p").text()).toBe("Order Total")

还要注意，您的

商户名称

道具的默认值不应包含另一个

商户名称

键。否则，如果未指定该道具，

payTo

将通过

merchantName.merchantName.payTo

访问

props: {
  "merchant-name": {
    type: Object,
    default: function() {
      return {
        // merchantName: {  // DON'T DO THIS
        //  payTo: "Order Total"
        // }

        payTo: "Order Total"
      }
    }
  },
}

---

css:first child？我尝试了

expect（wrapper.contains（div:first child>p））

。似乎不起作用。

expect(wrapper.find("div:first-child > p").text()).toBe("Order Total")

props: {
  "merchant-name": {
    type: Object,
    default: function() {
      return {
        // merchantName: {  // DON'T DO THIS
        //  payTo: "Order Total"
        // }

        payTo: "Order Total"
      }
    }
  },
}