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

Question

我有一个 LoginCard 组件，它使用 Buefy's 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>

在我的测试中，我想使用类似vue-test-utilssetValue 的方法在输入上设置一个值，触发该输入，并让它传播到我的data 模型属性email 和@987654329 @。

wrapper.find('input[type="email"]').setValue('test@example.com');
wrapper.find('input[type="password"]').setValue('password');

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

Answer 1

我发现您需要使用 awaitPromises 函数来触发响应性并导致输入完全传播。

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

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(...) 手动设置电子邮件和密码，但出于以下几个原因，我不喜欢这样：

1. 您实际上是在设置一些私有变量来测试您的代码

2. 您可以进入并删除输入元素，您的组件规范仍然可以通过，即使实际上它完全无法使用。