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

Question

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

在我的代码中，React 呈现了一个关于用户的小页面。该页面有一个 AJAX 调用来获取用户帖子。我想测试用户帖子是否很好地返回，waitsFor 非常非常擅长：等到用户有一些帖子，然后继续。

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

这是我当前的代码，waitsFor 和 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 和 runs 并替换为有效的 Jasmine 2.0 代码？所有 Jest 测试都知道 page.state.posts.length 在 expect 之前必须大于 0。

Answer 1

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

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