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" }}));

如果您进行了这两个更改，则您的测试应该通过。

使用jest-fetch-mock在香草JavaScript中测试抓取时出错

1 个答案: