loadable-components: TypeError: (0 , _component.default) is not a function mock tests

💬 Questions and Help

Hi,

We are using the loadable/component function to load components but are having issues with the mocking tests and running into the following error:

TypeError: (0 , _component.default) is not a function

Within our test we have just created a mock like so

jest.mock('@loadable/component', () => ({
  loadable: jest.fn()
}));

Also tried

jest.mock('@loadable/component', () => {
  const original = jest.requireActual('@loadable/component');
  return {
    ...original,
    __esModule: true,
    default: () => {},
    loadableReady: callback => callback(),
  };
});

But this still errors.

Any ideas on how we can mock it?

About this issue

Original URL
State: open
Created 3 years ago
Comments: 20

Most upvoted comments

@tejpowar how did you mock the loadable import?

nathanmillar16 on Jul 3, 2022

Finally found rather simple solution which works for me without mocking:

import { render,screen } from '@testing-library/react';
import LoadableComponent from './LoadableComponent';

test('it renders', async () => {
  const name = "LoadableComponent"

  render(<LoadableComponent name={name} />);

  expect(await screen.findByText(name)).toBeInTheDocument();
});

LoadableComponent file:

import loadable from '@loadable/component';

const LoadableComponent = loadable(
  () => import('your-library-path'),
);

export default LoadableComponent;

revenokanton on Oct 4, 2023

Did anyone found any solution?

tara-singh-danu on Jun 22, 2022

Hi,

We basically need to update unit tests whereby we are using loadable and need to mock it.

The error is:

Test suite failed to run

TypeError: (0 , _component.default) is not a function


  18 |
> 19 | export const agreement = loadable(
     |                               ^
  20 |   () => import(/* webpackChunkName: "agreement" */ './agreement'),
  21 |   { fallback: <Spinner overlay="clear" alignCenter /> }
  22 | );

So the error is actually failing in our component when we run our unit tests.

Basically we need to mock out the above code within our unit test

tejpowar on Nov 25, 2021