Сбой теста - PullRequest
Новая
       27

Сбой теста

0 голосов
/ 05 сентября 2018

Я пытаюсь проверить следующую функцию, используя 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);
        });
}

Чтобы написать контрольные примеры для этой функции, я высмеял функции window.fetch, contentApi, id и функцию assignContent. Затем я попытался вызвать эту функцию в моем тестовом примере, высмеивая все необходимые функции и переменные.

Вот фрагмент теста: 

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

Это сбой, и он не устанавливает содержимое как 'abc' и не вызывает 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' }

1 Ответ

0 голосов
/ 05 сентября 2018

Ваша mockend fetch функция все еще асинхронна (она возвращает Обещание), поэтому вам все равно придется «подождать» ее, прежде чем вы сможете получить доступ к «загруженным» данным. 

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

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

Конечно, вам нужно будет сказать Jest дождаться асинхронного кода, поэтому вы также захотите return obj.fetchContent()....

...