Javascript 单元测试与酶和jest反应

我正在尝试使用Ezyme和jest在react中存根一个API调用

我的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的存根响应更新

this.state.players

。我觉得我犯了一个简单的错误。有人能看到下面的代码有什么问题吗？它只是显示为长度为0，而不是该行的长度为2

也许这与我的ComponentDidMountAPI调用中有两个承诺有关，但我的规范文件中只有一个承诺

expect（renderedComponent.state（'players'）.length.toEqual（2）

import React，{Component}来自'React'；
从“./App”导入应用程序；
从“酶”导入{shall}
常数结果={
“玩家”：[
{
“名字”：“Robbie”，
“姓氏”：“基恩”，
},
{
“名字”：“艾伦”，
“姓氏”：“希勒”，
}
]
}
描述（'App'，（）=>{
描述（'componentDidMount'，（）=>{
它（'设置状态组件didmount'，async（）=>{
window.fetch=jest.fn（）.mockImplementation（（）=>({
现状：200，
好的，没错，
json:（）=>新承诺（（解决、拒绝）=>{
决心({
结果:{
“玩家”：[
{'firstname'：'Robbie'，'lastname'：'Keane'}，
{'firstname'：'Alan'，'lastname'：'Shearer'}
]
})
})
}))
const renderedComponent=等待浅层（）
等待RenderComponent.update（）
expect（renderedComponent.state（'players'）.length）.toEqual（2）
})
})
})

正如您提到的，您的测试文件中还需要一个承诺。此外，您应该从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;

从“React”导入React；
const TEST=“TEST”；
类测试扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
玩家：[]，
错误：false，
};
}
异步组件didmount（）{
试一试{
const res=等待提取（测试）
如果（res.ok）{
const data=await res.json（）
这是我的国家({
玩家：data.players，
错误：false，
});
}否则{
抛出新错误（“出了问题”）；
}
}捕获（错误）{
这是我的国家({
错误：正确，
});
}
}
render（）{
返回（你好世界）；
}
}
导出默认测试；

谢谢。不幸的是，它似乎不起作用-出于某种原因，长度仍然等于

0

。你知道为什么会发生这种情况吗？@peterflanagan我刚刚添加了我用来测试它的测试组件。它返回两个长度。如果这对你不起作用，你能给我看一下你的完整组件代码吗？

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;