CODEWITHSUNDEEP
javascriptcssreactjstailwind-csstailwind-in-js
user8989
user8989

Reputation: 688

i want to mock tailwindcss in React js and i am getting the below error

i am getting the following error

i was trying to write test cases of formik form. in which i was mocking the tailwind inside react and getting the following error. how to resolve the mocking issue and getting the error while rendering .

<Input
      label={t('chChampionForm.firstName')}
      className="my-1"
      name="firstName"
      labelClassName={'font-semibold'}
      value={formik.values.firstName}
      touched={formik.touched.firstName}
      onChange={formik.handleChange}
      onBlur={formik.handleBlur}
      error={formik.errors.firstName}
    />

enter image description here

below is my code

describe('FrChampionForm', () => {
  beforeEach(() => {
    jest.clearAllMocks();
  });

  it('submits the form when Continue button is clicked', async () => {
    const formSubmitHandler = jest.fn(); // Use a more descriptive prop name

    // Create a mock formik object with necessary properties
    const mockFormik = {
      values: {
        firstName: '',
        familyName: '',
        birthYear: '',
        city: '',
        postcode: '',
        bestApprentice: '',
        bestWorker: '',
        natFinalsYear: '',
        natFinalsRank: '',
        natFinalsRegion: '',
        euroSkillsYear: '',
        euroSkillsRank: '',
        worldSkillsYear: '',
        worldSkillsRank: '',
        trainingAndDiploma1: '',
        trainingAndDiploma2: '',
        currentCompanyCityDept: '',
        worldSkillsProfession: '',
        gender: '',
        currentJobName: '',
        instagramAddress: '',
        tiktokAddress: '',
        facebookAddress: ''
      },
      touched: {},
      handleChange: jest.fn(),
      handleBlur: jest.fn(),
      setFieldValue: jest.fn(),
      handleSubmit: formSubmitHandler, // Provide the correct function
      isSubmitting: false
    };

    // Mock the context value
    const mockContextValue = [{ profile: { type: 'fr' } }];

    // Mock the useContext hook
    React.useContext.mockReturnValue(mockContextValue);
    const theme = {};
    const { asFragment } = render(
        <PgProfileData 
        // formik={mockFormik} 
        />
    );
    expect(asFragment()).toMatchSnapshot();

    // Fill in form fields using data-test-id attribute
    userEvent.type(screen.getByTestId('first-name-input'), 'John');
    userEvent.type(screen.getByTestId('family-name-input'), 'Doe');
    userEvent.type(screen.getByTestId('birth-year-input'), '1990');
    // ... continue filling in other fields

    // Simulate selecting radio buttons using data-test-id attribute
    userEvent.click(screen.getByTestId('best-apprentice-radio-input'));
    userEvent.click(screen.getByTestId('best-worker-radio-input'));
    // ... continue selecting other options

    // Submit the form
    fireEvent.click(screen.getByText('Continue'));

    // Wait for form submission to complete (use your own logic if async operations are involved)
    await waitFor(() => {
      // Assertions after form submission, for example:
      expect(screen.queryByText('Continue')).toBeNull(); // Button should disappear after submission
      // ... other assertions
    });
  });

  // Add more test cases as needed
});

is the issue with some of the above code or it is for some other reasons i am unable to understand properly what is the issue with the above code.

Upvotes: 0

Views: 215

Answers (1)

nuser137
nuser137

Reputation: 537

For me, this way of mocking tailwind CSS works.

Only you have to do this in your jest.config:

module.exports: {
     moduleNameMapper: {
        //all mocks names 
        '\\.(css|less)$': '<rootDir>/node_modules/tailwindcss', //<-- try to mock like this, it works for me
    },
}

Hope this helps!

Upvotes: 0

Related Questions