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

2023年6月24日 352次阅读

我正在使用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(
        <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并运行并替换有效的Jasmine 2.0代码？所有Jest测试都知道在预期任何事情之前,page.state.posts.length必须大于0.

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

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

点赞