Question

// Balance.jsx
...

updateToken () {
  const parseResponse = (response) => {
    if (response.ok) {
      return response.json()
    } else {
      throw new Error('Could not retrieve access token.')
    }
  }

  const update = (data) => {
    if (data.token) {
      this.data.accessTokenData = data
    } else {
      throw new Error('Invalid response from token api')
    }
  }

  if (this.props.balanceEndpoint !== null) {
    return fetch(this.props.accessTokenEndpoint, {
      method: 'get',
      credentials: 'include'
    })
    .then(parseResponse)
    .then(update)
    .catch((err) => Promise.reject(err))
  }
}

componentDidMount () {
    this.updateToken()
    .then(() => this.updateBalance())
  }
}

// Test

it('updates the balance', () => {
  subject = mount(<Balance {...props} />)
  expect(fetchMock.called('balance.json')).to.be.true
})

我无法弄清楚如何使用Mocha测试上述内容。代码是可行的，调用updateBalance方法并且fetch api调用确实发生了，但测试仍然失败。如果我同步调用updateBalance（）它会传递...如何告诉测试等待解析的承诺？

Answer 1

你真的没有说你要测试的是什么 方法确实如此，但如果你想要测试的是方法在网络调用上解析，那么就不需要Sinon或其中任何一个，因为这就是你所需要的：

describe("BalanceComponent", () => {
    it("should resolve the promise on a successful network call", () => {
        const component = new BalanceComponent({any: 'props', foo: 'bar'});

        // assumes you call a network service that returns a 
        // successful response of course ...
        return component.updateToken();    
    });
});

这将测试该方法是否真正有效，但它很慢并且不是真正的单元测试，因为它依赖于网络，并且您在浏览器中运行测试，可以为您提供工作实现fetch。只要在Node中运行它或服务已关闭，它就会失败。

如果您想测试该方法实际上是否具有某些特定功能，那么您需要在测试中传递给then的函数中执行此操作：

    it("should change the token on a successful network call", () => {
        const component = new BalanceComponent({any: 'props', foo: 'bar'});
        const oldToken = component.data.accessTokenData;

        return component.updateToken().then( ()=> {
            assert(oldToken !== component.data.accessTokenData);
        });
    });

如果您想学习如何测试这样的代码而不依赖于您正在呼叫的网络服务的功能链接，您可以查看three different techniques described in this answer。

如何使用mocha在reactjs中测试此异步方法调用

1 个答案: