Question

在// "myDropzone" is the camelized version of the HTML element's ID Dropzone.options.myDropzone = { transformFile: function(file, done) { const imageCompressor = new ImageCompressor(); imageCompressor.compress(file, { // I assume the output image won't have the meta data anymore checkOrientation: true, // Limit output image width & height // For controllable file size & avoid blank output image // https://github.com/xkeshi/image-compressor#maxwidth maxWidth: 8192, maxHeight: 8192, // 0.8 is the default and already good enough // https://github.com/xkeshi/image-compressor#quality quality: 0.6, // Convert ALL PNG images to JPEG convertSize: 0, }) .then((result) => { // Handle the compressed image file. done(result) }) .catch((err) => { // Handle the error throw err }) } };实例的componentDidMount中，我有一个React.Component调用，它是在响应调用fetch()上进行的。

我可以模拟请求并使用setState进行响应，但是我不知道何时获取将解决它的承诺链。

sinon

在我的测试中，将componentDidMount() { fetch(new Request('/blah')) .then((response) => { setState(() => { return newState; }; }); }与jest一起使用：

enzyme

我是否需要刷新Promise队列/回调队列或类似内容？我可以通过超时重复检查newBehaviour，但这不理想。

Answer 1

最好的答案似乎是使用container pattern并从关注点分开的容器类中传递API数据，并分别测试组件。这样一来，被测组件就可以简单地将API数据当作道具，并使其更具可测试性。

Answer 2

由于您没有进行任何实际的api调用或其他耗时的操作，因此异步操作将在预期的短时间内解决。

因此，您可以稍等片刻。

it('has new behaviour from result of set state', (done) => {
  let component = mount(<Component />);
  requests.pop().respond(200);

  setTimeout(() => {
    try {
      component.update();
      assertNewBehaviour();
      done();
    } catch (error) {
      done(error);
    }
  }, 1000);
});

等待fetch（）使用Jest for React测试解决吗？

2 个答案: