开玩笑等到调用 typemoq 函数答案

【问题标题】：Jest wait until typemoq function called开玩笑等到调用 typemoq 函数
【发布时间】：2019-09-26 11:46:31
【问题描述】：

所以我有一个模拟（typemoq）http 调用，我将它传递到我的反应组件（安装有酶）：

const mockhttp: TypeMoq.IMock<IHttpRequest> = TypeMoq.Mock.ofType<IHttpRequest>();
mockhttp
  .setup(x => x.get('/get-all-goal-questions'))
  .returns(() => {
    return Promise.resolve(mockResponse.object.data);
  });

const wrapper = mount(<Goals history={Object} http={mockhttp.object} />);

expect(wrapper.find('#foo')).to.have.lengthOf(1);

但是，直到预期之后才会调用模拟“Get”，我怎样才能让期望等到调用模拟进行测试？

//这里编辑的是被测代码

let httpCall = this.props.pageHoc.httpRequest -- the call im mocking

import React, { Component } from 'react';
import { Row, Col } from 'react-bootstrap';
import { Animated } from "react-animated-css";
import { Answer, IPageHOC } from '../../interfaces/pageObjects';
// Fonts
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCheck } from '@fortawesome/free-solid-svg-icons'
// Cookies
import cookie from 'react-cookies';
// Google analytics
import ReactGA from 'react-ga';

type GoalsComponent = {
    answers: Answer[],
    showError:boolean,
    showAnimation:boolean,
    question:string,
    questionId:number
};

type Props = {
  history:any, 
  pageHoc?: IPageHOC
}

export default class Goals extends Component<Props, GoalsComponent> 
{
  constructor(props: any) {
    super(props);
    this.state = {
        answers : [],
        showError: false,
        showAnimation:false,
        question: "",
        questionId: 0
    }
  }
    
  componentDidMount(){

    // Hide nav
    this.props.pageHoc.hideRightNav();

    this.loadQuestions();
    
  }

  loadQuestions(){

    // Setup auth   
    let auth = this.props.pageHoc.externalAuth;

    auth.setToken(cookie.load('Email'), cookie.load('Password')).then((x) => { 

      let httpCall = this.props.pageHoc.httpRequest;
       
      // Headers
      httpCall.setHeaders({
          Organization: cookie.load('Organization')
      });

      httpCall.get(`/thrive/goal/get-all-goal-questions`)
      .then((x) => {

          this.setState({
            answers:x.data.goalQuestions[0].answers, 
            question: x.data.goalQuestions[0].question, 
            questionId: x.data.goalQuestions[0].id
          });
              
      })      
      .catch((x) => {
          console.log(x, "error");
      });   

    }); 

  }

  render() {
    return (
       
          <ul className="list-group list-group-goals">       
              {this.state.answers.map((x:Answer) => 
                  <li className={("list-group-item ") + (x.selected ? "selected" : "")}  key={x.id} onClick={() => this.toggleGoal(x.id)}>
                      {x.answer}
                      <FontAwesomeIcon icon={faCheck} className={("goal-tick ") + (x.selected ? "goal-tick-red" : "")} />
                  </li>
              )}                
          </ul>
  
    );
  }
}

【问题讨论】：

只是盲目地猜测，也许通过httpRequest 成员传递pageHoc 对象道具会使其工作？即<Goals ... pageHoc={{ httpRequest: mockhttp }} />

标签： javascript jestjs enzyme typemoq

【解决方案1】：

hmm 如果你正在尝试测试异步请求，你应该遵循这里写的内容： https://jestjs.io/docs/en/tutorial-async

对于简短版本，您的测试应如下所示：

it('works with async/await', async () => {
  expect.assertions(1);
  const data = await user.getUserName(4);
  expect(data).toEqual('Mark');
});

【讨论】：

【解决方案2】：

你可以这样做：

 fun test = async () => {
    const mockhttp: TypeMoq.IMock<IHttpRequest> = TypeMoq.Mock.ofType<IHttpRequest>();
mockhttp
  .setup(x => x.get('/get-all-goal-questions'))
  .returns(() => {
    return Promise.resolve(mockResponse.object.data);
  });

const wrapper = await mount(<Goals history={Object} http={mockhttp.object} />);

expect(wrapper.find('#foo')).to.have.lengthOf(1);
}

这将等待模拟的 get 函数返回的 promise 得到解析，并且组件使用最新数据进行渲染。

【讨论】：