score:0

right so this while doing this i was going off how you usually mock react components:

jest.mock('component/something', () => ({
 __esmodule: true,
  default: () => <>mocked component</>,
}));

this usually works, but for dot-notation component the syntax is different:


const component = () => <>main component</>;
component.loading = () => <>loading</>;

jest.mock('components/component', () => ({
  __esmodule: true,
  default: component,
}));

if you want to go a step further you can mock with a jest.fn():

const mockeditemstatus = jest.fn();
const mockeditemstatusskeleton = jest.fn();

const component = () => mockeditemstatus();
component.loading = () => mockeditemstatusskeleton();

jest.mock('components/component', () => ({
  __esmodule: true,
  default: component,
}));

then in your tests you can make the mock return the specific component you need:

  it('renders correctly', () => {
    mockeditemstatusskeleton.mockimplementation(() => <>loading</>);
    render(<component/>)
    expect(mockeditemstatusskeleton).tohavebeencalled();
  });

Related Query

More Query from same tag