javascript 我想在React js中模拟tailwindcss,我得到了下面的错误

km0tfn4u  于 5个月前  发布在  Java
关注(0)|答案(1)|浏览(56)

我得到以下错误

我试着写formik形式的测试用例。在其中我嘲笑了react内部的顺风并得到了以下错误。如何解决嘲笑问题并在渲染时得到错误。

<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}
    />

字符串


的数据

下面是我的代码

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


是与上述代码的一些问题,或者是由于一些其他原因,我无法正确理解什么是与上述代码的问题。

hmae6n7t

hmae6n7t1#

对我来说,这种嘲笑tailwind CSS的方式很有效。
你只需要在jest.config中这样做:

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

字符串
希望这有帮助!

相关问题