Как имитировать изменение значения на слайдере пользовательского интерфейса материала? - PullRequest
Новая
       35

Как имитировать изменение значения на слайдере пользовательского интерфейса материала?

1 голос
/ 07 октября 2019

Я пытаюсь проверить изменение состояния с помощью React Hooks (useState), имитируя измененное значение на слайдере пользовательского интерфейса Material, так как это вызывает мою функцию обновления состояния ловушек. Затем я пытаюсь подтвердить изменение, проверяя текст, отображаемый на странице. Я чувствую, что подошел ближе, синтаксические ошибки больше не кричат ​​на меня, но похоже, что изменения не происходит.

Я пробовал несколько разных селекторов и обнаружил, что большинство людей онлайн импортируют ихЭлемент пользовательского интерфейса материала и использование импортированного элемента в качестве селектора. Я пробовал это как с .as (0), так и без него, со значением 500 в виде строки и числа и других вариантов.

Метод onChange моего ползунка напрямую вызывает мой метод обновления состояния ловушек сe.target.value, чтобы установить в качестве нового значения состояния (и это все прекрасно работает в реальном приложении).

Какие-нибудь идеи, которые я могу попробовать? Или, может быть, есть другой лучший способ проверить изменение состояния с помощью перехватчиков React? 

import ReactDOM from 'react-dom';
import App from './App';
import { createMount } from '@material-ui/core/test-utils';
import Slider from "@material-ui/core/Slider";

describe('App', () => {
  let mount;

  beforeEach(() => {
    mount = createMount();
  });

  afterEach(() => {
    mount.cleanUp();
  });


  it('updates the volts displayed when the slider value changes', () => {
    const wrapper = mount(<App />);
    wrapper.find(Slider).at(0).simulate('change', { target: { value: 500 } });
    expect(wrapper.find('.volts-screen').text()).toEqual('0.500');
  })

}```



ERROR


expect(received).toEqual(expected) // deep equality

    Expected: "0.500"
    Received: "0.000"

1 Ответ

1 голос
/ 08 октября 2019

Закончилось выяснить это. Я импортировал ползунок из ядра материала (так же, как в моем компоненте), а затем я использовал импортированный элемент в своем файле wrapper.find и смоделировал изменение со вторым аргументом {target: {value: 500}}.

Сначала я подумал, что это не сработало, но понял, что, поскольку в моем случае эффект обновлял состояние моего компонента, которое является асинхронным, мне нужно было добавить setTimeout, чтобы убедиться, что обновление было зафиксировано до того, как моя проверка прошла.

Видел некоторые аналогичные указания по другим элементам пользовательского интерфейса материала, но не понимал, что слайдер будет таким похожим. Оставим это здесь на всякий случай, если какая-то другая бедная душа прочесывает интернет для информации, связанной с "Слайдером";) 

//imported the element as below
import Slider from "@material-ui/core/Slider";

// found in wrapper using that element and simulated change with target value on timeout
it('updates the volts displayed when the slider value changes', () => {
    const wrapper = mount(<App />);
    wrapper.find(Slider).at(0).simulate('change', { target: { value: 500 } });
    setTimeout(() => expect(wrapper.find('.volts-screen').text()).toEqual('0.500'), 0);
  })
...