почему функция обратного вызова не может пройти тестовый шут в реакции? функция callBack не является функцией (тестирование Checkbox.Group в React с помощью jest) - PullRequest
Новая
       30

почему функция обратного вызова не может пройти тестовый шут в реакции? функция callBack не является функцией (тестирование Checkbox.Group в React с помощью jest)

0 голосов
/ 30 апреля 2020

это мой тест 

describe('MultipleDaySelector', () => {
  test('checked the MultipleDaySelector', () => {
    const propVal = ''
    const { container } = render(<MultipleDaySelector parentCallbackMultipleDaySelector={propVal} />)
    const checkBoxes = container.querySelector('[type="checkbox"]') as HTMLElement
    expect(checkBoxes).not.toBe(null);
    act(() => {
      userEvent.click(checkBoxes)
    });
    expect(checkBoxes).toBeChecked()
  })
})
Вот моя функция 
export default function MultipleDaySelector({ parentCallbackMultipleDaySelector }): JSX.Element {
  const onChange = (value) => parentCallbackMultipleDaySelector(value)

  return <>
    <Checkbox.Group
      data-testid="MultipleDaySelectorTest"
      onChange={onChange}
      name="MultipleDaySelector"
      options={[
        { label: "Monday", value: "1" },
        { label: "Tuesday", value: "2" },
        { label: "Wednesday", value: "3" },
        { label: "Thursday", value: "4" },
        { label: "Friday", value: "5" },
        { label: "Saturday", value: "6" },
        { label: "Sunday", value: "0" }
      ]}
    />
  </>
}

Как вы видите, я собираюсь протестировать функцию MultipleDaySelector, при запуске теста я получу ошибку 

TypeError: parentCallbackMultipleDaySelector is not a function

      3 | 
      4 | export default function MultipleDaySelector({ parentCallbackMultipleDaySelector }): JSX.Element {
    > 5 |   const onChange = (value: any) => parentCallbackMultipleDaySelector(value)
        |                                    ^
      6 | 
      7 |   return <>
      8 |     <Checkbox.Group

, когда я удаляю тест parentCallbackMultipleDaySelector работает нормально, но я понятия не имею, что является проблемой с функцией обратного вызова

1 Ответ

0 голосов
/ 30 апреля 2020

Проблема: Вы передаете строку, а не функцию, в качестве реквизита в тесте 

describe('MultipleDaySelector', () => {
  test('checked the MultipleDaySelector', () => {

    const propVal = '' // <-- This is a string!!

    const { container } = render(<MultipleDaySelector parentCallbackMultipleDaySelector={propVal} />)
    const checkBoxes = container.querySelector('[type="checkbox"]') as HTMLElement
    expect(checkBoxes).not.toBe(null);
    act(() => {
      userEvent.click(checkBoxes)
    });
    expect(checkBoxes).toBeChecked()
  })
})

Эта строка в функции вынуждает опору parentCallbackMultipleDaySelector быть необходимой функция: 

const onChange = (value) => parentCallbackMultipleDaySelector(value)

Решение: Передача функции, т.е. () => {} или jest.fn()

describe('MultipleDaySelector', () => {
  test('checked the MultipleDaySelector', () => {

    const propVal = jest.fn();

    const { container } = render(<MultipleDaySelector parentCallbackMultipleDaySelector={propVal} />)
    const checkBoxes = container.querySelector('[type="checkbox"]') as HTMLElement
    expect(checkBoxes).not.toBe(null);
    act(() => {
      userEvent.click(checkBoxes)
    });
    expect(checkBoxes).toBeChecked()
  })
})
...