Question

我正在玩Jest，我得到了一个涉及Promise的案例。我不确定这个行为是什么。这是我的React组件，它处理componentDidMount中的promise。

import React, { Component, PropTypes } from 'react';
import withStyles from '../../decorators/withStyles';
import http from '../../core/HttpClient';

class User extends Component {


    static propTypes = {
      source: PropTypes.string.isRequired,
    };


  constructor() {
    super();
    this.state = {
      data: [],
    };
  }


    componentDidMount() {
      http.get(this.props.source).then(
          (data)=>{
            this.setState({
              data: data,
            });
          });
    }

    render() {
      const createItem = function mapToListItem(item) {
        return <li>{item.id} {item.name}</li>;
      };
      console.log(this.state.data);
      return <div><ul>{this.state.data.map(createItem)}</ul></div>;
    }
}

export default User;

以下是失败的相关测试：

jest.dontMock('../User');

import React from 'react';
import ReactDOM from 'react-dom';
import ReactAddons from 'react/addons';
import http from '../../../core/HttpClient';
import User from '../User';

const TestUtils = ReactAddons.addons.TestUtils;

describe('load data from backend on componentIsMounted', () => {
  it('should load data from backend when it is mounted', () => {

    const expectedUsers = ["1 gazon","2 patate"];
    http.get=jest.genMockFunction();
    http.get.mockReturnValue(new Promise(
      (resolve,reject)=>
        resolve(JSON.parse('[{"id":1,"name":"gazon"},{"id":2,"name":"patate"}]'))
      )
    );

    const user = TestUtils.renderIntoDocument(
     <User source="whatever" />
      );

    let users=TestUtils.scryRenderedDOMComponentsWithTag(user,'li').map((node)=>node.textContent);
    for(var i=0;i<2;i++){
        expect(users[i]).toBe(expectedUsers[i])
    }
    console.log("test")
  });
});

这是ouput

[]
test
[ { id: 1, name: 'gazon' }, { id: 2, name: 'patate' } ]

我希望像

这样的东西

[]
[ { id: 1, name: 'gazon' }, { id: 2, name: 'patate' } ]
test

我认为这与我的模拟返回Promise的事实有关，因为硬编码版本很好（下面的代码）：

import React, { Component, PropTypes } from 'react';
import withStyles from '../../decorators/withStyles';
import http from '../../core/HttpClient';

class UserHardcoded extends Component {


    static propTypes = {
      source: PropTypes.string.isRequired,
    };


  constructor() {
    super();
    this.state = {
      data: [],
    };
  }


    componentDidMount() {
     this.setState(
        {data: JSON.parse('[{"id":1,"name":"gazon"},{"id":2,"name":"patate"}]')}
      );
    }

    render() {
      const createItem = function mapToListItem(item) {
        return <li>{item.id} {item.name}</li>;
      };
      console.log(this.state.data);
      return <div><ul>{this.state.data.map(createItem)}</ul></div>;
    }
}

export default UserHardcoded;

进行测试

jest.dontMock('../UserHardcoded');

import React from 'react';
import ReactDOM from 'react-dom';
import ReactAddons from 'react/addons';
import UserHardcoded from '../UserHardcoded'

const TestUtils = ReactAddons.addons.TestUtils;

describe('load data from backend on componentIsMounted', () => {
  it('should load data from backend when it is mounted', () => {

    const expectedUsers = ["1 gazon","2 patate"];

    const user = TestUtils.renderIntoDocument(
     <UserHardcoded source="whatever" />
      );

    let users=TestUtils.scryRenderedDOMComponentsWithTag(user,'li').map((node)=>node.textContent);
    for(var i=0;i<2;i++){
        expect(users[i]).toBe(expectedUsers[i])
    }
    console.log('test');
  });
});

和预期产出：

[]
[ { id: 1, name: 'gazon' }, { id: 2, name: 'patate' } ]
test

感谢您的回答！

Jest Promise - 期望在承诺返回之前完成

0 个答案: