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-utils setValue的方法在输入上设置一个值，触发该输入，并将其传播到我的data模型属性email和password。

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

您实质上是在设置一些私有变量以测试您的代码
您可以删除输入元素，并且组件规范仍然会通过，即使实际上完全不可用。

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

1 个答案: