javascript - stub 获取单元测试与 enzyme 和玩笑发生 react

Question

我正在尝试使用 enzyme 和玩笑来对 React 中的 API 调用进行 stub 。

我的 React 组件代码如下所示。这非常有效。

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,
      })
    }
  }

我正在尝试模拟响应并测试 api 调用的成功和失败。我的测试代码如下所示，它永远不会使用 api 的 stub 响应更新 this.state.players 。我觉得我犯了一个简单的错误。谁能看出下面的代码有什么问题吗？它只是显示该行的长度为 0，而不是 2

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

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

import React, { Component } from 'react';
import App from './App';
import { shallow } from 'enzyme'

const result = {
    'players': [
      {
        'firstname': 'Robbie',
        'lastname': 'Keane',
      },
      {
        'firstname': 'Alan',
        'lastname': 'Shearer',
      }
    ]
  }

describe('App', () => {
  describe('componentDidMount', () => {
    it('sets the state componentDidMount', async () => {
      window.fetch = jest.fn().mockImplementation(() => ({
        status: 200,
        ok: true,
        json: () => new Promise((resolve, reject) => {
          resolve({
            result: {
             'players': [
               { 'firstname': 'Robbie', 'lastname': 'Keane' },
               { 'firstname': 'Alan', 'lastname': 'Shearer' }
            ]
          })
        })
      }))

      const renderedComponent = await shallow(<App />)
      await renderedComponent.update()
      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;