javascript - 为什么我的测试在我的( enzyme 模拟事件)同步事件处理程序之前完成？

Question

我有一个基于 mocha 的测试，它在我的 React 组件的基于 jsdom 的 enzyme 测试中的 onChange 处理程序之前完成，尽管该处理程序使用 babel+ES2017 同步。如果我执行 1ms 的 setTimeout() 来放入我的 expect() 调用；测试通过。

只是想知道故障在哪里？我确定这里有一些我没有考虑的简单概念。我在想 jsdom 或 enzyme 不会等待事件处理程序完成？使用 fetch-mock 模拟 fetch() 的时间长度使问题复杂化(因为它通常是异步的)。

在没有setTimeout()、sinon 或lolex 的情况下是否可以解析，如果不能； simon/lolex 有可能吗？

明天我希望重构它以避免在测试中模拟 fetch()。

测试输出

</div>
    1) flashes a nice message upon success
Success now!!
End of function now. 


10 passing (4s)
1 failing

 1) <Signup /> flashes a nice message upon success:
 Uncaught AssertionError: expected { Object (root, unrendered, ...) } to have a length of 1 but got 0
  at test/integration/jsx/components/signup.test.js:38:54
  at _combinedTickCallback (internal/process/next_tick.js:67:7)
  at process._tickDomainCallback (internal/process/next_tick.js:122:9)

Bootstrap

require('babel-register')();
require('babel-polyfill');

...

var jsdom = require('jsdom').jsdom;
var exposedProperties = ['window', 'navigator', 'document'];

global.document = jsdom('');
global.window = document.defaultView;
global.FormData = document.defaultView.FormData;
Object.keys(document.defaultView).forEach((property) => {
  if (typeof global[property] === 'undefined') {
    exposedProperties.push(property);
    global[property] = document.defaultView[property];
  }
});

global.navigator = {
  userAgent: 'node.js'
};

documentRef = document;

测试

import React from 'react';
import { expect } from 'chai';
import { shallow, mount, render } from 'enzyme';
import Signup from '../../../../assets/js/components/signup.jsx';
import fetchMock from 'fetch-mock';
import sinon from 'sinon';
import 'isomorphic-fetch';

...

it("flashes a nice message upon success", function(){
  fetchMock.mock("*", {body: {}});
  const wrapper = shallow(<Signup />);

  wrapper.find('#email').simulate('change', {target: {id: 'email', value: validUser.email}});

  const signupEvent = {preventDefault: sinon.spy()};

  wrapper.find('#signupForm').simulate('submit', signupEvent);
  wrapper.update();

  console.log(wrapper.debug());
  expect(signupEvent.preventDefault.calledOnce).to.be.true;
  expect(wrapper.find('.alert-success')).to.have.length(1);
  expect(wrapper.find('.alert-success').text()).to.contain('Your sign up was successful!');

  fetchMock.restore();
});

组件

async handleSubmit(e) {
  e.preventDefault();
  this.setState({ type: 'info', message: 'Sending...', shouldValidateForm: true });
  let form = new FormData(this.form);
  let response;
  let responseJson = {};
  try {
    response = await fetch("/signup", {
      method: "POST",
      body: form
    });
    responseJson = await response.json();
    if(!response.ok){
      throw new Error("There was a non networking error. ");
    }
    this.setState({ type: 'success', message: 'Your sign up was successful!' });
    console.log("Success now!!");
  } catch(err) {
    this.setState({ type: 'danger', message: "There was a technical problem. "});
  }
  console.log("End of function now. ");
}

...

<form method="POST" onSubmit={this.handleSubmit} ref={(form) => {this.form = form;} } id="signupForm">

Answer 1

我的第一个回答集中在 simulate 的异步性质上，但从评论中可以清楚地看出 enzyme 对该方法的实现 is not asynchronous因为它只是同步调用点击处理程序。所以这是我的答案的重写，重点放在异步行为的其他原因上。

这个测试:

expect(wrapper.find('.alert-success')).to.have.length(1);

... 失败，因为此时尚未执行以下行:

this.setState({ type: 'success', message: 'Your sign up was successful!' });

我在这里假设此 setState 调用会将 alert-success 类添加到消息元素。

要了解为什么尚未设置此状态，请考虑执行流程:

wrapper.find('#signupForm').simulate('submit', signupEvent);

这将触发表单的 onsubmit 属性中指定的内容:

onSubmit={this.handleSubmit} 

因此 handleSubmit 被调用。然后设置一个状态:

this.setState({ type: 'info', message: 'Sending...', shouldValidateForm: true });

...但这不是您需要的状态:它不添加 alert-success 类。然后进行 Ajax 调用:

response = await fetch("/signup", {
    method: "POST",
    body: form
});

fetch 返回一个 promise ，而 await 将暂停函数的执行，直到该 promise 得到解决。同时，继续执行 在 handleSubmit 调用后要执行的任何代码。在这种情况下，这意味着您的测试将继续，并最终执行:

expect(wrapper.find('.alert-success')).to.have.length(1);

...失败了。表示待处理的 Ajax 请求有响应的事件可能已经到达事件队列，但只有在当前执行的代码完成后才会对其进行处理。因此，测试失败后，fetch 返回的 promise 将得到解决。这是因为 fetch 的内部实现有一个回调通知响应已经到达，因此它解决了 promise 。这使得函数 handleSubmit “醒来”，因为 await 现在解除了执行的阻塞。

还有第二个 await 用于获取 JSON，这将再次引入事件队列循环。最终(双关语不是故意的)，代码将恢复并执行测试正在寻找的状态:

this.setState({ type: 'success', message: 'Your sign up was successful!' });

所以...为了使测试成功，它必须实现异步回调，等待足够长的时间让 Ajax 调用获得响应。

这可以通过 setTimeout(done, ms) 来完成，其中 ms 应该是足以确保 Ajax 响应可用的毫秒数。