Vue.js 如何使用子Buefy输入组件测试Vue组件？

我有一个

LoginCard

组件，它使用

b-input

组件来呈现电子邮件和密码输入：

<b-field label="Email">
  <b-input
    v-model="email"
    type="email"
    placeholder="Your email"
    required
  >
  </b-input>
</b-field>

<b-field label="Password">
  <b-input
    v-model="password"
    type="password"
    password-reveal
    placeholder="Your password"
    required
  >
  </b-input>
</b-field>

---

但这不起作用，值不会传播。

我发现需要使用

函数来触发反应性并使输入完全传播

例如，我的最终测试如下所示：

it('Logs in user via form', async () => {
  const wrapper = mount(LoginCard, {
    mocks: { $auth: mockAuth }
  });

  const inputs = wrapper.findAll({ name: 'BInput' });

  expect(inputs.length).toEqual(2);

  wrapper.find('input[type="email"]').setValue(email);
  await flushPromises();

  wrapper.find('input[type="password"]').setValue(password);
  await flushPromises();

  wrapper.find('form').trigger('submit.prevent');
  await flushPromises();

  expect(strategy).toBe('local');
  expect(data).toEqual({
    data: { user: { email: email, password: password } }
  });
});

其中mockAuth正在模拟Nuxt的全局$auth:

const mockAuth = {
  loginWith: (_strategy, _data) => {
    return new Promise((resolve, reject) => {
      strategy = _strategy;
      data = _data;
      if (error) {
        reject(new Error(errorMessage));
      } else {
        resolve();
      }
    });
  }
};

它比我想要的更详细，但我喜欢它使用简单的输入来测试所需的输出

您还可以使用
wrapper.setData（…）
在触发表单提交之前手动设置电子邮件和密码，但我不喜欢这样做，原因如下：

实际上，您正在设置一些私有变量以测试代码

您可以进入并删除输入元素，您的组件规范仍然可以通过，即使在现实中它完全不可用

您的测试似乎正在验证
b-input
是否将输入值传播到
v-model
。假设这是一个单元测试，那么验证似乎超出了范围。如果您只想设置
电子邮件
和
密码
，您可以直接初始化它们（通过
wrapper.vm
或mounting options'
propsData
）。我的测试是验证用户是否在表单中输入电子邮件和密码并提交表单，然后使用该数据调用
loginWith
方法。这感觉像是一个单元测试，因为输入是用户名和密码。目前，我正在使用
setData
对其进行测试，但感觉不太对劲-这相当于在类上手动设置一个实例变量，而不是使用类的api。我有完全相同的布局，您的解决方案工作得很好，谢谢。我想知道为什么
等待wrapper.vm.$nextTick（）不起作用。是否介意与您分享如何不获取此警告[Vue warn]：未知自定义元素：
const mockAuth = {
  loginWith: (_strategy, _data) => {
    return new Promise((resolve, reject) => {
      strategy = _strategy;
      data = _data;
      if (error) {
        reject(new Error(errorMessage));
      } else {
        resolve();
      }
    });
  }
};