Javascript 使用Jest和react测试库测试具有大量输入字段的表单的正确方法是什么？

我有一个有很多输入的表单，问题是，有没有一种方法可以简化对所有这些单一输入变量的处理，因为它们的列表看起来很难看。对具有两个输入的表单的测试看起来干净而优雅，但这一个看起来好像我做错了什么。 还有一个“specialties”数据变量，我认为它不属于mocks文件夹，因为它不是模拟的api调用，只是表单的一个道具。是否有一个惯例，我应该把这些变量放在tests文件夹的什么地方？ 如果有任何关于我做错了什么的反馈，我将不胜感激，谢谢

import React from 'react'
import { Provider } from 'react-redux'
import { render, screen } from '@testing-library/react'
import store from '../../../store'
import PupilForm from '../../../components/forms/PupilForm'
import specialties from '../../../__mocks__/specialties.json'

const mockHandleFormData = jest.fn()
const mockOpenInfoModal = jest.fn()

describe('<PupilForm /> component', () => {
    // eslint-disable-next-line
    let view
    // inputs
    let nameInput
    let specialtyInput
    let genderInput
    let birthDateInput
    let mainSchoolClassInput
    let benefitsInput
    let mainSchoolInput
    let homeAddressInput
    let phoneNumberInput
    let applicantNameInput
    let contactEmailInput
    let fathersNameInput
    let fathersPhoneInput
    let fathersEmploymentInfoInput
    let mothersNameInput
    let mothersPhoneInput
    let mothersEmploymentInfoInput
    // checkboxes
    let docsCheck
    let processDataCheck
    let paymentObligationsCheck
    // buttons
    let submitButton
    let resetButton


    beforeEach(() => {
        view = render(
            <Provider store={store}>
                <PupilForm
                    handleFormData={mockHandleFormData}
                    openInfoModal={mockOpenInfoModal}
                    specialties={specialties.map(spec => spec.title)}
                    mode="public"
                />
            </Provider>
        )

        nameInput = screen.getByRole('textbox', { name: /Прізвище та повне ім'я учня/ })
        specialtyInput = screen.getByRole('combobox', { name: /Фах/ })
        genderInput = screen.getByRole('combobox', { name: /Стать/ })
        birthDateInput = screen.getByLabelText(/Дата народження/)
        mainSchoolClassInput = screen.getByRole('combobox', { name: /Клас ЗОШ/ })
        benefitsInput = screen.getByRole('combobox', { name: /Пільги %/ })
        mainSchoolInput = screen.getByRole('textbox', { name: /В якому закладі навчается/ })
        homeAddressInput = screen.getByRole('textbox', { name: /Домашня адреса/ })
        phoneNumberInput = screen.getByRole('textbox', { name: /Телефонний номер учня/ })
        applicantNameInput = screen.getByRole('textbox', { name: /Ім'я особи, яка звертається із заявою/ })
        contactEmailInput = screen.getByRole('textbox', { name: /Контактна електронна пошта/ })

        fathersNameInput = screen.getByRole('textbox', { name: /Ім'я батька/ })
        fathersPhoneInput = screen.getByRole('textbox', { name: /Телефонний номер батька/ })
        fathersEmploymentInfoInput = screen.getByRole('textbox', { name: /Місце роботи батька/ })

        mothersNameInput = screen.getByRole('textbox', { name: /Ім'я матері/ })
        mothersPhoneInput = screen.getByRole('textbox', { name: /Телефонний номер матері/ })
        mothersEmploymentInfoInput = screen.getByRole('textbox', { name: /Місце роботи матері/ })

        docsCheck = screen.getByRole('checkbox', { name: /Я зобов'язаний надати ці документи/ })
        processDataCheck = screen.getByRole('checkbox', { name: /Я згоден на збір та обробку/ })
        paymentObligationsCheck = screen.getByRole('checkbox', { name: /Зобов'язання про оплату/ })

        submitButton = screen.getByRole('button', { name: /Відправити/ })
        resetButton = screen.getByRole('button', { name: /Очистити/ })
    })

    it('in renders all fields correctly', () => {
        expect(/Дані\/інформація про учня/).toBeInTheDocument
        expect(nameInput).toHaveAttribute('type', 'text')
        expect(specialtyInput).toHaveClass('custom-select')
        expect(genderInput).toHaveClass('custom-select')
        expect(birthDateInput).toHaveAttribute('type', 'date')
        expect(mainSchoolClassInput).toHaveClass('custom-select')
        expect(benefitsInput).toHaveClass('custom-select')
        expect(mainSchoolInput).toHaveAttribute('type', 'text')
        expect(homeAddressInput).toHaveAttribute('type', 'text')
        expect(phoneNumberInput).toHaveAttribute('type', 'text')
        expect(applicantNameInput).toHaveAttribute('type', 'text')
        expect(contactEmailInput).toHaveAttribute('type', 'email')

        expect(/Дані\/інформація о батьках/).toBeInTheDocument
        expect(fathersNameInput).toHaveAttribute('type', 'text')
        expect(fathersPhoneInput).toHaveAttribute('type', 'text')
        expect(fathersEmploymentInfoInput).toHaveAttribute('type', 'text')
        expect(mothersNameInput).toHaveAttribute('type', 'text')
        expect(mothersPhoneInput).toHaveAttribute('type', 'text')
        expect(mothersEmploymentInfoInput).toHaveAttribute('type', 'text')

        expect(docsCheck).toHaveAttribute('type', 'checkbox')
        expect(processDataCheck).toHaveAttribute('type', 'checkbox')
        expect(paymentObligationsCheck).toHaveAttribute('type', 'checkbox')

        expect(submitButton).toHaveAttribute('type', 'submit')
        expect(resetButton).toHaveAttribute('type', 'reset')
    })

    /*
    it('some other test that uses the same inputs', () => {
        // expect all inputs to be able to change their values on user input
    })
    */
})

从“React”导入React
从“react redux”导入{Provider}
从'@testing library/react'导入{render，screen}
从“../../../store”导入存储
从“../../../components/forms/PupilForm”导入PupilForm
从“../../../\u mocks\u\u/specialties.json”导入专业
const mockHandleFormData=jest.fn（）
const mockOpenInfoModal=jest.fn（）
描述（‘组件’，（）=>{
//eslint禁用下一行
让我们来看
//投入
让nameInput
让我们把特殊的东西放进去
让我说
让生日输入
让我们输入
让利益投入
让学生输入
让homeAddressInput
让电话号码输入
让应用程序名称输入
让contactEmailInput
让fathernameinput
让父亲的电话输入
让FatherEmploymentInfoInput
让我来输入
让我来输入
让mothersEmploymentInfoInput
//复选框
让我们去码头吧
让processDataCheck
让我们检查一下付款义务
//钮扣
让提交按钮
让我们重新设置按钮
在每个之前（（）=>{
视图=渲染(
规格名称）}
mode=“public”
/>
)
nameInput=screen.getByRole（'textbox'，{name:/ППізЮПЮЮЮЮЮЮЮЮЮЮЮЮЮЮ
specialtyInput=screen.getByRole（'combobox'，{name:/Фааа/？}）
genderInput=screen.getByRole（'combobox'，{name:/Саа/}）
birthDateInput=screen.getByLabelText（/Бааааааааааааа
mainSchoolClassInput=screen.getByRole（'combobox'，{name:/КааСб/}）
benefitsInput=screen.getByRole（'combobox'，{name:/Пібббб%/}）
mainSchoolInput=screen.getByRole（'textbox'，{name:/bзззЮЮЮгггазЮЮЮЮг
homeAddressInput=screen.getByRole（'textbox'，{name:/БМаааааааа/}）
phoneNumberInput=screen.getByRole（'textbox'，{name:/CharStyle\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
applicationNameInput=screen.getByRole（'textbox'，{name:/名称：/名称：/名称：/名称
contactEmailInput=screen.getByRole（'textbox'，{name:][Сааааааааа
FatherNameInput=screen.getByRole（'textbox'，{name:/ⅠМ'ббббб/}）
FatherPhoneInput=screen.getByRole（'textbox'，{name:/CharStyleаафаааа/}）
FatherEmploymentInfoInput=screen.getByRole（'textbox'，{name:/Міббббба/}）
mothersNameInput=screen.getByRole（'textbox'，{name:/iццаiі/}）
mothersPhoneInput=screen.getByRole（'textbox'，{name:/CharStyle\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
mothersEmploymentInfoInput=screen.getByRole（'textbox'，{name:/Мібббббб/}）
docsCheck=screen.getByRole（'checkbox'，{name://名称：/
processDataCheck=screen.getByRole（'checkbox'，{name:/Язззззззззззззззз107
paymentObligationsCheck=screen.getByRole（'checkbox'，{name://зззззззззззааз107
submitButton=screen.getByRole（'button'，{name:/СіаПаааааа/}）
resetButton=screen.getByRole（'button'，{name:/ö
})
它（'正确呈现所有字段'，（）=>{
期望（或/或/或/或/或/或/或/或/或/或/或/或/或/或/或/或/或/或/或/或/或/或/或/或/或/或/或/或/或/或/或/或/或/或/或
expect（nameInput）.toHaveAttribute（'type'，'text'））
expect（specialtyInput）.toHaveClass（'custom-select'））
expect（genderInput）.toHaveClass（'custom-select'））
expect（birthDateInput）.toHaveAttribute（'type'，'date'）
expect（mainSchoolClassInput）.toHaveClass（'custom-select'））
expect（benefitsInput）.toHaveClass（'custom-select'））
expect（mainSchoolInput）.toHaveAttribute（'type'，'text'））
expect（homeAddressInput）.toHaveAttribute（'type'，'text'））
expect（phoneNumberInput）.toHaveAttribute（'type'，'text'））
expect（applicationNameInput）.toHaveAttribute（'type'，'text'））
expect（contactEmailInput）.toHaveAttribute（'type'，'email'）
期望（/аааа\/іфааааааааааааа1072
expect（fathernameinput）.toHaveAttribute（'type'，'text'））
expect（fatherPhoneInput）.toHaveAttribute（'type'，'text'））
expect（fatherEmploymentInfoInput）.toHaveAttribute（'type'，'text'））
expect（mothersNameInput）.toHaveAttribute（'type'，'text'））
expect（mothersPhoneInput）.toHaveAttribute（'type'，'text'））
expect（mothersEmploymentInfoInput）.toHaveAttribute（'type'，'text'））
expect（docsCheck）.toHaveAttribute（'type'，'checkbox'））
expect（processDataCheck）.toHaveAttribute（'type'，'checkbox'））
expect（paymentObligationsCheck）.toHaveAttribute（'type'，'checkbox'））
expect（submitButton）.toHaveAttribute（'type'，'submit'）
expect（resetButton）.toHaveAttribute（'type'，'reset'）
})
/*
它（'使用相同输入的其他测试'，（）=>{
//期望所有输入都能够在用户输入时更改其值
})
*/
})

有什么方法可以简化吗