1

我有一个LoginCard组件使用Buefy 的 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模型属性 foremail和password。

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

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

4

1 回答 1

2

我发现您需要使用该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. 您可以进入并删除输入元素，您的组件规范仍然会通过，即使实际上它完全无法使用。

于 2019-06-28T11:50:21.917 回答