如何使用Jest测试React呈现的异步数据？ [英] How to use Jest to test React rendered async data?

问题描述

我正在使用React for render和Jest / Jasmine进行测试。我用旧的Jest / Jasmine waitsFor 和运行编写了测试但现在这些都在Jasmine 2中消失了我不是确定如何替换新的已完成 asyncs。

I am using React for render and Jest/Jasmine for test. I have test written using old Jest/Jasmine waitsFor and runs but these are gone now in Jasmine 2 and I am not sure how to replace with new done asyncs.

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

In my code React renders a small page about a user. That page has an AJAX call to fetch user posts. I want to test that user posts have come back nice, and waitsFor was very, very good at this: wait until user has some post, then continue.

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

I looked online at lots of people talking about using AJAX calls inside Jest test which is not what I want. My Jest test has no idea about AJAX call being made, so I need a way to wait until results come back.

这是我当前的代码 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才能期望任何东西。

How can I delete the waitsFor and runs and replace with Jasmine 2.0 code that works? All Jest test knows is that page.state.posts.length must be greater than 0 before expecting anything.

推荐答案

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

You should refactor this test into two unit tests that will provide a more rigorous testing of your code. It would make the tests more independent of one another and help identify errors in a more refined scope. These won't be exact as I do not know what your code is like, but here's something along the lines I would expect to see: -

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

I am not too sure what is happening in your renderIntoDocument function so the top test may be a little broken... It looks like there is either too much going on inside the function, or you need to test the calls that function is making instead. If you elaborate on what it does I'll edit the answer.

这篇关于如何使用Jest测试React呈现的异步数据？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！