使用 jest-fetch-mock 在 vanilla JavaScript 中测试获取时出错

Question

>我正在尝试测试从类中提取的内容。我需要创建一个类实例来访问 fetch 方法。如果我消除类并直接返回，该方法有效。

我试图以这种方式进行测试，但它返回未定义。有什么解决办法吗？

谢谢

//api.test.js
//import the class Request and module jest-fetch-mock
import Request from './index'
global.fetch = require('jest-fetch-mock')
describe('testing api', () => {
  beforeEach(() => {
    fetch.resetMocks()
  })
  it('calls api and returns data to me', async () => {
    const request = new Request('http://localhost:3000/api.json')
    fetch.mockResponseOnce(JSON.stringify({data: '12345'}))
    // assert on the response
    const res = request.getSections()
    expect(res.data).toEqual('12345')

    // assert on the times called and arguments given to fetch
    expect(fetch.mock.calls.length).toEqual(1)
    expect(fetch.mock.calls[0][0]).toEqual('http://localhost:3000/api.json')
  })
})
//api.js
/**
* Request Component
* @class Request
*/
class Request {
/**
* Creates an instance of Request
*
* @param {String}  url - The url of the API
* @throws {Error} - Incorrect type
* @memberof Request
*/
  constructor(url) {
     if (typeof url !== 'string') throw TypeError(`${url} is not a string`)
     this.url = url
  }
  /**
  * Handler get sections from api
  * @memberof Request
  */
  getSections() {
     return fetch(this.url)// eslint-disable-line
       .then(res => res.json())
       .then(result => result.sections)
       .catch(err => console.error(err)) // eslint-disable-line
  }
}
export default Request

我收到了：

expect(received).toEqual(expected)
Expected value to equal:
  "12345"
Received:
  undefined
Difference:
  Comparing two different types of values. Expected string but received undefined.
  14 |     // assert on the response
  15 |     const res = request.getSections()
> 16 |     expect(res.data).toEqual('12345')
     |                      ^
  17 |
  18 |
  19 |     // assert on the times called and arguments given to fetch

Res也是未定义的。我做错了什么，但我不知道它是什么。

Answer 1

我看到两个问题，您可以解决它们以使事情正常工作。

首先，由于getSections是一个异步函数（它返回一个 promise），因此您需要从测试中异步调用它。 您的测试方法已标记为 async ，因此您需要做的就是在调用之前添加 await 关键字。

const res = await request.getSections()

其次，您的Request代码期望包含sections属性的服务器响应，而您的模拟没有该属性。 尝试更改模拟以包含sections属性，例如：

fetch.mockResponseOnce(JSON.stringify({ sections: { data: "12345" }}));

如果进行这两项更改，则测试应通过。