2

I'm trying to test a component that renders a couple of asynchronously imported children with React Loadable like a Modal for example. My test looks like this

// 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);

  });

The test gives a not very helpful error shown bellow

enter image description here

I can find no information about this error at all. Anyone could shed some light here please?

Thanks in advance for your time!

skyboyer
  • 22,209
  • 7
  • 57
  • 64
proko
  • 175
  • 2
  • 11

1 Answers1

1

I had the same issue when i used 'plugin-syntax-dynamic-import' for dynamic import. switch it to 'babel-plugin-dynamic-import-node' helped me to resolve that.

bablerc.js

plugins: [
// 'syntax-dynamic-import',
'dynamic-import-node',
]
Jiaah
  • 758
  • 2
  • 11
  • 29
  • I am also facing same problem, But I am not using babelrc file. Can you please suggest some other way to fix this problem. – balachandar Jun 18 '20 at 06:23