Question

我正在尝试使用酶和玩笑对API调用进行响应。

我的React Component代码如下所示。效果很好。

let allQuestion = QuestionBank()
var questionNumber = 0
var score = 0
var selectedAnswer = true


@IBOutlet weak var checkAnswerLabel: UILabel!
@IBOutlet weak var questionLabel: UILabel!
@IBOutlet weak var scoreLabel: UILabel!
@IBOutlet var progressBar: UIView!
@IBOutlet weak var progressLabel: UILabel!

override func viewDidLoad() {
    super.viewDidLoad()

    startOver()
}


@IBAction func answerPressed(_ sender: AnyObject) {

    if sender.tag==1{
        selectedAnswer = true
    }
    else if sender.tag == 2 {
        selectedAnswer = false
    }
    let correctAnswer = allQuestion.list[questionNumber].answer

    if correctAnswer == selectedAnswer {

        checkAnswerLabel.text = "Right "
        score += 1
        scoreLabel.text = "score : \(score)"
    }
    else if correctAnswer != selectedAnswer {
        checkAnswerLabel.text = "Wrong "

        answerPressed(<#T##sender: AnyObject##AnyObject#>)

    }


}


@IBAction func nextButtonPressed(_ sender: UIButton) {

    if questionNumber < 12 {

        questionNumber += 1
        questionLabel.text = allQuestion.list[questionNumber].question
        checkAnswerLabel.text = ""
        progressLabel.text = "\(questionNumber+1)/13"
}
    else {
        let alert = UIAlertController(title: "Great ", message: "you have rech the end of the quiz, do you want to restart", preferredStyle: .alert)
        let restartAction = UIAlertAction(title: "Restart", style: .default, handler: ({
            UIAlertAction in
            self.startOver()
        }))
        alert.addAction(restartAction)
        present(alert, animated: true, completion: nil)

    }


}
func startOver () {
    questionNumber = 0
    score = 0
    print(questionNumber)
    questionLabel.text = allQuestion.list[questionNumber].question
    scoreLabel.text = "score: \(score)"
    progressLabel.text = "\(questionNumber+1)/13"
    checkAnswerLabel.text = ""
}

我正在尝试模拟响应并测试api调用的成功和失败。我的测试代码如下所示，并且它从未使用api的响应响应来更新async componentDidMount() { try { const res = await fetch(FETCH_ENDPOINT) if(res.ok) { const data = await res.json() this.setState({ players: data.players, error: false }); } else { throw new Error('Something went wrong'); } } catch (error) { this.setState({ error: true, }) } }。我觉得我在犯一个简单的错误。谁能看到下面的代码有什么问题吗？它只是显示为长度为0，而不是此行的

也许这与我的componentDidMount api调用中有2个诺言有关，但是我的规范文件中只有一个诺言吗？

this.state.players

expect(renderedComponent.state('players').length).toEqual(2)

Answer 1

如前所述，您的测试文件中还需要一个Promise。另外，您应该从json对象中删除result属性。这是一个有效的测试代码：

window.fetch = jest.fn().mockImplementation(() => {
    return new Promise((resolve, reject) => {
        resolve({
            status: 200,
            ok: true,
            json: () => new Promise((resolve, reject) => {
                resolve({
                    'players': [
                        { 'firstname': 'Robbie', 'lastname': 'Keane' },
                        { 'firstname': 'Alan', 'lastname': 'Shearer' }
                    ]
                });
            })
        });
    });
})

测试组件：

import React from 'react';

const TEST = "test";

class Test extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
        players: [],
        error: false,
    };
  }
  async componentDidMount() {
    try {
      const res = await fetch(TEST)
      if(res.ok) {
        const data = await res.json()
        this.setState({
          players: data.players,
          error: false,
        });
      } else {
        throw new Error('Something went wrong');
      }
    } catch (error) {
      this.setState({
        error: true,
      });
    }
  }
  render() {
    return (<div>Hello world</div>);
  }
}

export default Test;

存根读取单元测试与酶和玩笑反应

1 个答案: