Асинхронные тесты React Jest

Вот ситуация, когда у меня есть компонент React, который захватывает все записи через разбиение на страницы в componentDidUpdate. Код работает так, как задумано, но я не могу получить инструкции ожидания для ожидания завершения всех асинхронных операций.

Код компонента

async componentDidUpdate(prevProps) {
		if (this.props !== prevProps) {
			console.info('Componet did update called');
	
      //File ids are grabbed else where and the are populating correctly
			const batchSize = 50;
			for (let idx = 0; idx < fileIds.length; idx += batchSize) {
				const returnedFiles = await getFileVitals(fileIds.slice(idx, idx + batchSize));
				this.doWork(returnedFiles, fileRefs);

				this.setState({
					filesToDisplay: this.files,
					title: Name,
					description: Description,
				});
			}
		}
	}
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/16.5.0/umd/react.production.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.5.0/umd/react-dom.production.min.js"></script>

Вот шутливый тест, который не проходит

//DTCQ is where the data serice is implemented
jest.unmock('../../dtcq');
beforeAll(() => {
	dataReaders.getFileVitals = jest.fn();

	dataReaders.getFileVitals.mockReturnValue(mockData);
});


test.only('Component renders proper number of file lines if hiding single revisions.', async () => {
	console.info('Running component render proper number 30');
	const component = mount(<CustomizeTemplate pkg = {data.Package} files = {data.Files} hideSingleRevisions featureSet = {features} buildClicked = {jest.fn()} />);

	component.setProps({ featureSet: 'p' });
	component.update();

	console.info('*****Expect Processed');

	// Check that there are 30 file lines, as there are more if not hiding single revisions. 
	await expect(component.find('file-lines').children().length).toEqual(30);
});

Какой для этого метод шутки? Я прочитал их асинхронные документы и не видел примеров, выполняющих такие операции.

Поведение ключевого слова "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) для оценки ваших знаний,...
0
0
91
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Должно быть обещание связать тесты. Лучше всего это работает с ферментом disableLifecycleMethods вариант:

const component = mount(..., { disableLifecycleMethods: true });
const props = component.props();
component.setProps({ featureSet: 'p' });
await component.instance().componentDidUpdate(props);
...

Пробовал это. Прямой вызов componentDidUpdate вызывает ошибку типа, указывающую, что это не функция.

joshwl2003 10.12.2018 22:26

Фиксированный. Это должен быть component.instance().

Estus Flask 11.12.2018 07:53

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