Question

我有一个React实用程序组件，它读取URL的内容：

{
  name: "not asd",
  url: "examp.le"
}

我一直在尝试使用Sinon的'use strict'; export class ReadURL { getContent = (url) => { return new Promise((resolve, reject) => { console.log('Promise') let xhr = new XMLHttpRequest(); xhr.open("GET", url, false); xhr.onreadystatechange = () => { console.log('onreadystatechange', xhr.readyState) if (xhr.readyState === 4) { if (xhr.status === 200 || xhr.status == 0) { console.log('200') var allText = xhr.responseText; resolve(allText); } else { reject('ajax error:' + xhr.status + ' ' + xhr.responseText); } } }; xhr.send(null); }); }; }来存根xhr，但无论我如何尝试，我都无法让它实际处理 - 它目前通过假阳性而没有接收{{ 1}}事件。我已经尝试过使用XHR和Axios软件包以及本机XMLHttpRequest，请求包含在一个承诺中，而不是一堆不同的大头钉，并阅读无数的博客文章，文档和SO问题，我失去了对live ...组件本身运行良好。

我已经设法使用promises和存根模块依赖项进行测试，但这让我很难过。

这是测试：

useFakeXMLHttpRequest()

onreadystatechange被触发，输出确认它是一个sinon import chai, { expect } from 'chai'; import sinon, { spy } from 'sinon'; import {ReadURL} from './ReadURL'; describe('ReadURL', () => { beforeEach(function() { this.xhr = sinon.useFakeXMLHttpRequest(); this.requests = []; this.xhr.onCreate = (xhr) => { console.log('xhr created', xhr) this.requests.push(xhr); }; this.response = 'Response not set'; }); afterEach(function() { this.xhr.restore(); this.response = 'Response not set'; }); it('should get file content from an xhr request', () => { const readURL = new ReadURL(), url = 'http://dummy.com/file.js', urlContent = `<awe.DisplayCode htmlSelector={'.awe-login'} jsxFile={'/src/js/components/AncoaAwe.js'} jsxTag={'awe.Login'} componentFile={'/src/js/components/Login/Login.js'} />`; readURL.getContent(url).then((response) =>{ console.log('ReadURL-test response', response) expect(response).to.equal(urlContent); }); window.setTimeout(() => { console.log('ReadURL-test trigger response') this.requests[0].respond(200, { 'Content-Type': 'application/json' }, urlContent ) , 10}); }); });请求。

我创建了一个应用程序的回购，只需要查看组件功能所需的最低要求： https://github.com/DisasterMan78/awe-testcase

我目前没有在线获取样本，因为我不知道任何运行测试的在线沙箱。如果我能为此找到服务，我会尝试添加失败概念的证明。

帮助我Obi Wan-Kenobi。你是我唯一的希望！

Answer 1

嗯，这很有趣。我在做了一个较旧的项目之后，今天又回到了它，但它仍然耗费了太长时间。愚蠢的，小的句法错误。当然......

有两个严重错误。

首先，为了完成承诺，done需要作为参数传递给测试it()函数的函数：

it('should get file content from an xhr request', (done) => {
  ...
}

现在我们可以完成承诺：

    ...
    readURL.getContent(url)
      .then((response) => {
        expect(response).to.equal(this.response.content);
        done();
      })
      .catch((error) => {
console.log(error);
        done();
      });
    ...

不知怎的，我读过的文档或文章似乎都没有标注这一点，但很少有人也在处理承诺，我的ExtractTagFromURL测试也依赖于承诺并不需要这个，但我已经确认这个测试绝对至关重要。

如果承诺正常，respond()电话周围不需要超时：

    ...
    this.requests[0].respond(this.response.status,
      {
        'Content-Type': this.response.contentType
      },
      this.response.content
    );
    ...

最后，为了this的{{1}}和this.requests的值以及其他共享属性的正确设置和读取，beforeEach()和afterEach()的函数参数... beforeEach(() => { ... } ...需要使用箭头语法：

template<typename T>
using MyVec0 = Vector<T,0>;

Github上的简化测试用例已更新，通过，可以从https://github.com/DisasterMan78/awe-testcase

克隆

我想这让我觉得Obi Wan-Kenobe，是吗？

如果需要，请随时要求澄清！

使用chai / sinon对ES6进行反应：对组件中的XHR进行单元测试

1 个答案: