Когда я запускаю тесты для этого компонента DidMount в реакции, очевидно, несколько строк не покрыты? - PullRequest
Новая
       21

Когда я запускаю тесты для этого компонента DidMount в реакции, очевидно, несколько строк не покрыты?

0 голосов
/ 27 февраля 2019

Я пытаюсь использовать jest для проверки моего метода componentDidMount: 

componentDidMount() {
    agent.Gatherings.getAll().then((result) => {
        this.setState({ gatherings: result }) //no code coverage
    }).catch((err) => {
        this.setState({ gatherings: [] }) //no code coverage
    })
}

, но один из моих других тестов работает нормально: 

  it('test gathering List is rendered', () => {
    wrapper.setState({ gatherings: [TestGathering] })
    expect(wrapper.find('MyList').length).toEqual(1);
  });

Я хочу, чтобы каждая строка была покрытав моем тестировании.Как я могу получить строки в моей componentDidMount () для all , которые будут протестированы в jest?

UPDATE, я импортирую файл непосредственно в тестовый файл.Импортируемый файл называется agent.js.Код, который вызывается в функции, строки которой пропущены:

agent.js

export const requests = {
    get: url => fetch(url).then(res => res.json()),
    post: (url, body) =>
        fetch(url, {
            method: 'POST',
            body: body,
            headers: {
                'Content-Type': 'application/json'
            }
        }).then(res => res.json()) //also this line lacks coverage
}

export const Gatherings = {
    getAll: () =>
        requests.get(API_ROOT + '/gatherings')  
}
export default {
    Gatherings
}

1 Ответ

0 голосов
/ 27 февраля 2019

Выпуск

Строка кода должна запускаться во время выполнения теста , чтобы включить его в покрытие кода Jest.

Подробности

Две строки без покрытия - это обратные вызовы для Promise, возвращаемые agent.Gatherings.getAll.

Promise обратные вызовы добавляются в очередь PromiseJobs и запустить после завершения текущего сообщения и до запуска следующего сообщения .

Именно поэтому эти строки в настоящее время не включены в покрытие кода ... сейчас онине запускайте, пока не завершится синхронный тест .

Решение

Вам просто нужно убедиться, что эти две строки работают во время выполнения теста .

Подробности

Идеальный подход - await Promise непосредственно в вашем тесте .

В этом случае Promise нелегко получить из теста, поэтому требуется другой подход.

Обходной путь

Если agent.Gatherings.getAll смоделированы для немедленного разрешения или отклонения, то обратный вызов Promise будет поставлен в очередь в PromiseJobs к тому времени, когда компонент завершит рендеринг.

Чтобы разрешить PromiseДля выполнения обратного вызова используйте тестовую функцию async и вызовите await Promise.resolve();, который, по сути, ставит в очередь оставшуюся часть теста в конце PromiseJobs и позволяет сначала запускать все ожидающие задания: 

import * as React from 'react';
import { shallow } from 'enzyme';

import { Comp } from './code';  // <= import your component here
import * as agent from './agent';

describe('Component', () => {

  let spy;

  beforeEach(() => {
    spy = jest.spyOn(agent.Gatherings, 'getAll');
  })

  afterEach(() => {
    spy.mockRestore();
  })

  it('updates when agent.Gatherings.getAll() resolves', async () => {  // use an async test function
    const response = [ 'gathering 1', 'gathering 2', 'gathering 3' ];
    spy.mockResolvedValue(response);
    const wrapper = shallow(<Comp />);  // render your component
    await Promise.resolve();  // let the callback queued in PromiseJobs run
    expect(wrapper.state()).toEqual({ gatherings: response });  // SUCCESS
  });

  it('handles when agent.Gatherings.getAll() rejects', async () => {  // use an async test function
    spy.mockRejectedValue(new Error());
    const wrapper = shallow(<Comp />);  // render your component
    await Promise.resolve();  // let the callback queued in PromiseJobs run
    expect(wrapper.state()).toEqual({ gatherings: [] });  // SUCCESS
  });
});

Теперь у вас должно быть покрытие кодана Promise обратных вызовах в componentDidMount.

...