`React-apollo`` MockedProvider` требует тайм-аута?

Я использую jest с MockedProvider response-apollo, и у меня проблемы, потому что MockedProvider, кажется, ведет себя асинхронно.

Учитывая следующий простой компонент:

const Component = () => <Query query = {query}>(({loading, data }) => if (loading) return 'loading' else if (data) return 'data' else return 'nothing'</Query>

Этот тест:

it('', done => {
    const renderer = TestRenderer.create(
      <MockedProvider mocks = {myMock} >
        <Component/>
      </MockedProvider>
    )

  expect(renderer.toJSON()).toMatchSnapshot()

показывает снимок: loading

но если я добавлю простой тайм-аут в 1 мс:

  it('', done => {
    const renderer = TestRenderer.create(
      <MockedProvider mocks = {myMock} >
        <Component/>
      </MockedProvider>
    )

    setTimeout(() => {
      expect(renderer.toJSON()).toMatchSnapshot()
      done()
    }, 1);

Я получаю снимок: data

Есть ли более элегантный способ обойти это?

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
3
0
1 147
2

Ответы 2

Мне любопытно, есть ли у других идеи.

Прямо сейчас нужно сделать что-то вроде этого:

export const AsyncTestRenderer = async elements => {
  /** Render, then allow the event loop to be flushed before returning */
  const renderer = TestRenderer.create(elements)

  return new Promise(resolve => {
    setTimeout(() => resolve(renderer), 1)
  })
}

и используя его в тесте:

const renderer  = await AsyncTestRenderer(
  <MockedProvider mocks = {mocks} >
    <MyComponent/>
  </MockedProvider>
)

expect(renderer.toJSON()).toMatchSnapshot() // renders data from mock Query 

Вы можете использовать waait lib, как показано на этом документы

it('',async () => {
    const renderer = TestRenderer.create(
      <MockedProvider mocks = {myMock} >
        <Component/>
      </MockedProvider>
    )
    await wait(0);
    expect(renderer.toJSON()).toMatchSnapshot();

Другие вопросы по теме