Jest – Learners Store

Solution: TypeError: Cannot read properties of undefined (reading ‘DemoContainer’) and failing because of components={[‘DatePicker’, ‘TimePicker’]} in the DemoContainer tag.

We will get this error because we are mocking ‘@mui/x-date-pickers/internals/demo’ as follows.

jest.mock('@mui/x-date-pickers/internals/demo', () => {
  DemoContainer: jest.fn((props) => {
    return null;
  })
})

but here it is not covering components={[‘DatePicker’, ‘TimePicker’]} in the <DemoContainer components={[‘DatePicker’, ‘TimePicker’]}> as we are returning null in the mock. So it is throwing the error as Cannot read properties of undefined (reading ‘DemoContainer’). So here we need to mock DatePicker and TimePicker as follows.

import { render } from '@testing-library/react';
import * as React from 'react';
import App from './index';


const DatePickerMock = () => <div>Mocked DatePicker</div>;
const TimePickerMock = () => <div>Mocked TimePicker</div>

jest.mock('@mui/x-date-pickers/internals/demo', () => ({
  DemoContainer: jest.fn(({ components }) => (
    <div>
      {components.includes('DatePicker') && <DatePickerMock />}
      {components.includes('TimePicker') && <TimePickerMock />}
    </div>
  )),
}))

const renderApp = () => {
  return render(
    <App />
  );
};

describe('App Component', () => {
  it('renders without crashing', () => {
    const { asFragment } = renderApp();

    expect(asFragment()).toMatchSnapshot();
  });
 
});

Solution: Jest encountered an unexpected token and failing at —- import { DemoContainer } from ‘@mui/x-date-pickers/internals/demo’

If test cases are failing with the error message Jest encountered an unexpected token and shows SyntaxError: Unexpected token ‘export’ at line import { DemoContainer } from ‘@mui/x-date-pickers/internals/demo’, then we need to mock ‘@mui/x-date-pickers/internals/demo’ as follows.

import * as React from 'react';
import { render } from '@testing-library/react';
import App from './index';


jest.mock('@mui/x-date-pickers/internals/demo', () => {
  DemoContainer: jest.fn((props) => {
    return null;
  })
})

const renderApp = () => {
  return render(
        <App />
  );
};

describe('App Component', () => {
  it('renders without crashing', () => {
    const { asFragment } = renderApp();

    expect(asFragment()).toMatchSnapshot();
  });
 
});

How to mock useLocation() using jest in React ?

We can mock the useLocation() by using the following code

jest.mock('react-router-dom', () => ({
  ...jest.requireActual('react-router-dom'),
  useLocation: () => ({
    pathname: 'localhost:3000/examplePath/123',
  }),
}));

Mock a function or setState using jest in ReactJS.

lets assume that we need to mock setStatus(). So, in test file we will mock by using jest as follows.

const setStatus = jest.fn();

const renderUserProfile = (props = {}) => {
    return render(
                <UserProfile status={true} setStatus={setStatus} />
              )
    }

const userProps1 = Props = {
 status: true,
 setStatus
}

const userProps2 = Props = {
 status: false,
 setStatus
}

describe('Component UserProfile', () => {
  it("user status with true", () => {
    renderUserProfile(userProps1);
    const buttonElement = screen.getByRole("button").toHaveContext("Online");
    fireEvent.click(userProps1);
    expect(setStatus).toHaveBeenCalled();
  });
  it("user status with false", () => {
    renderUserProfile(userProps1);
    const buttonElement = screen.getByRole("button").toHaveContext("Offline");
    fireEvent.click(userProps2);
    expect(setStatus).toHaveBeenCalled();
  });

})