如何使用 Jest 测试 React 渲染的异步数据？

我使用 React 进行渲染，使用 Jest/Jasmine 进行测试。我用旧的 Jest/Jasmine 编写了测试waitsFor and runs但这些现在在 Jasmine 2 中已经消失了，我不知道如何用新的替换done asyncs.

在我的代码中，React 渲染了一个关于用户的小页面。该页面有一个 AJAX 调用来获取用户帖子。我想测试用户帖子是否已正常返回，并且waitsFor非常非常擅长这一点：等到用户发布一些帖子，然后继续。

我在网上看到很多人谈论在 Jest 测试中使用 AJAX 调用，这不是我想要的。我的 Jest 测试不知道正在进行的 AJAX 调用，因此我需要一种方法来等待结果返回。

这是我当前的代码waitsFor and runs:

it('loads user post', () => {
    var page = TestUtils.renderIntoDocument(
        <UserPage params={{user: 'fizzbuzz', 'pass': 'xxx'}} />
    );

    waitsFor(() => {
        return page.state.posts.length > 0;
    }, "post loaded", 10000);

    runs(() => {
        var posts = TestUtils.scryRenderedDOMComponentsWithClass(page, 'post');
        expect(posts.length).toEqual(10);
    });
});

我怎样才能删除waitsFor and runs并替换为有效的 Jasmine 2.0 代码？所有 Jest 测试都知道page.state.posts.length之前必须大于 0expect任何东西。

您应该将此测试重构为两个单元测试，这将为您的代码提供更严格的测试。它将使测试彼此更加独立，并有助于在更细化的范围内识别错误。这些并不准确，因为我不知道你的代码是什么样的，但我希望看到以下内容：-

it('generates the expected properties for a page', function () {
    var page = TestUtils.renderIntoDocument(
        <UserPage params={{user: 'fizzbuzz', 'pass': 'xxx'}} />
    );

    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函数，因此顶部测试可能有点损坏...看起来函数内部发生了太多事情，或者您需要测试函数正在进行的调用。如果您详细说明它的作用，我将编辑答案。