jest测试ajax,ajax – 如何使用Jest来测试React呈现的异步数据？

我正在使用React for render和Jest / Jasmine进行测试.我使用旧的Jest / Jasmine等待测试并运行,但现在这些已经在Jasmine 2中消失了,我不知道如何用新的asyncs替换.

在我的代码中,React呈现了一个关于用户的小页面.该页面有一个AJAX调用来获取用户帖子.我想测试一下用户的帖子回来了,并且waitsFor非常非常擅长：等到用户有一些帖子,然后继续.

我在网上看了很多人谈论在Jest测试中使用AJAX调用,这不是我想要的.我的Jest测试不知道正在进行AJAX调用,所以我需要一种等待结果返回的方法.

这是我当前使用waitsFor和运行的代码：it('loads user post', () => {

var page = TestUtils.renderIntoDocument(

);

waitsFor(() => {

return page.state.posts.length > 0;

}, "post loaded", 10000);

runs(() => {

var posts = TestUtils.scryRenderedDOMComponentsWithClass(page, 'post');

expect(posts.length).toEqual(10);

});

});

如何删除waitsFor并运行并替换有效的Jasmine 2.0代码？所有Jest测试都知道在预期任何事情之前,page.state.posts.length必须大于0.

最佳答案 您应该将此测试重构为两个单元测试,以便对您的代码进行更严格的测试.它将使测试更加独立,并有助于在更精确的范围内识别错误.这些并不准确,因为我不知道你的代码是什么样的,但是这里有一些我希望看到的内容： –it('generates the expected properties for a page', function () {

var page = TestUtils.renderIntoDocument(

);

expect(page.someProperty).toBeDefined();

expect(page.user).toEqual('fizzbuzz');

});

it('generates the correct number of posts from a given page object', function () {

var fakePage = {

// put your fake mock data here that TestUtils expects

};

var posts = TestUtils.scryRenderedDOMComponentsWithClass(fakePage, 'post');

expect(posts.length).toEqual(10);

});

我不太确定你的renderIntoDocument函数中发生了什么,所以顶级测试可能有点破坏……看起来函数内部有太多内容,或者你需要测试函数正在进行的调用.如果你详细说明它的作用,我将编辑答案.