#reactjs #jestjs #react-loadable #react-testing-library
#reactjs #jestjs #react-loadable #react-testing-library
Вопрос:
Я пытаюсь протестировать компонент, который отображает пару асинхронно импортированных дочерних элементов с возможностью загрузки React, например, как модальный. Мой тест выглядит следующим образом
// Using React Testing Library
import { fireEvent, getByTestId, wait } from 'react-testing-library';
test('with RTL', async () => {
// There is a portal. I leave it in the code sample in case it gives any hints
const portalNode = document.getElementById('overlay');
const { container, getByLabelText } = render(<SearchFormComposed {...props} />);
expect(portalNode.children.length).toBe(0);
fireEvent.click(getByLabelText('MyButton'));
const list = await wait(() => getByTestId(portalNode, 'myList'));
console.log(list);
expect(portalNode.children.length).toBe(1);
});
Тест выдает не очень полезную ошибку, показанную ниже
Я вообще не могу найти никакой информации об этой ошибке. Кто-нибудь может пролить свет на это, пожалуйста?
Заранее спасибо за ваше время!
Ответ №1:
У меня была такая же проблема, когда я использовал ‘plugin-syntax-dynamic-import’ для динамического импорта. переключение на ‘babel-plugin-dynamic-import-node’ помогло мне решить эту проблему.
bablerc.js
plugins: [
// 'syntax-dynamic-import',
'dynamic-import-node',
]
Комментарии:
1. Я также сталкиваюсь с такой же проблемой, но я не использую файл babelrc. Не могли бы вы, пожалуйста, предложить какой-нибудь другой способ исправить эту проблему.