测试用例失败

Question

I am trying to test the following function using jest:

fetchContent() {
    fetch(`${this.contentApi}?id=${this.id}`)
        .then(data => data.json())
        .then(response => {
            this.content = response;
            console.log('===this.content====', this.content);
            console.log('===Response====', response);
            console.log('===This====', this);
            this.assignContent();
        })
        .catch(error => {
            throw Error(error);
        });
}

In order to write test cases for this function, I mocked the window.fetch function, contentApi , id and the assignContent function. Then, I tried to call this function inside of my test case by mocking all the necessary functions and variables.

Here is a snippet of the test case:

it('should fetch and assign content', () => {
    obj.assignContent = jest.fn();
    obj.contentApi = 'abc.xyz';
    obj.id = 'dxp';
    window.fetch = jest.fn().mockImplementation(url => {
        if(url === 'abc.xyz?id=dxp') {
            return Promise.resolve({
                json: () => { return 'abc'; }
            })
        }
        else {
            return Promise.reject(new Error());
        }
    });
    obj.fetchContent();
    console.log('===OBJ====', obj);
  // expect(obj.content).toEqual('abc');
  // expect(obj.assignContent).toBeCalled();
  });

It is failing and it is neither setting content as 'abc' , nor it is calling assignContent() .

console.log src\dxp-container.spec.tsx:57
===OBJ==== Container {
    initialAssignmentDone: false,
    assignContent: 
    {   [Function: mockConstructor]
        _isMockFunction: true,
        getMockImplementation: [Function],
        mock: [Getter/Setter],
        mockClear: [Function],
        mockReset: [Function],
        mockReturnValueOnce: [Function],
        mockReturnValue: [Function],
        mockImplementationOnce: [Function],
        mockImplementation: [Function],
        mockReturnThis: [Function],
        mockRestore: [Function] },
    contentApi: 'abc.xyz',
    id: 'dxp' }

console.log src\dxp-container.tsx:24
===this.content==== abc

console.log src\dxp-container.tsx:25
===Response==== abc

console.log src\dxp-container.tsx:26
===This==== Container {
    initialAssignmentDone: false,
    assignContent: 
    {   [Function: mockConstructor]
        _isMockFunction: true,
        getMockImplementation: [Function],
        mock: [Getter/Setter],
        mockClear: [Function],
        mockReset: [Function],
        mockReturnValueOnce: [Function],
        mockReturnValue: [Function],
        mockImplementationOnce: [Function],
        mockImplementation: [Function],
        mockReturnThis: [Function],
        mockRestore: [Function] },
    contentApi: 'abc.xyz',
    id: 'dxp',
    content: 'abc' }

Answer 1

Your mockend fetch function is still asynchronous (it returns a Promise) so you still have to "wait" for it before you can access the "loaded" data.

fetchContent() {
    return fetch(`${this.contentApi}?id=${this.id}`)
    ...
}

obj.fetchContent().then(() => {
   console.log('===OBJ====', obj);
})

Of course you'll have to tell Jest to wait for the async code so you'll want to also return obj.fetchContent()... .