Я использую 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
Есть ли более элегантный способ обойти это?



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Мне любопытно, есть ли у других идеи.
Прямо сейчас нужно сделать что-то вроде этого:
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();