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函数中发生了什么，所以顶级测试可能会有点破坏......看起来函数里面有太多内容，或者你需要测试相反，函数的调用。如果你详细说明它的作用，我将编辑答案。

如何使用Jest测试React呈现的异步数据？

1 个答案: