Как использовать jest.spyOn с компонентом функции React с использованием Typescript - PullRequest
Новая
       74

Как использовать jest.spyOn с компонентом функции React с использованием Typescript

1 голос
/ 24 мая 2019

Я занимаюсь разработкой приложения React с использованием Typescript и хуков, и я пытаюсь использовать Enzyme с Jest для тестирования компонентов функций.Я не могу использовать jest.spyOn для тестирования метода в моем компоненте.Метод jest.spyOn не разрешается правильно и отображает следующее сообщение при наведении

«Аргумент типа« validateBeforeSave »» нельзя назначить параметру типа «context» | «setState» |"forceUpdate" | "render" | "componentDidMount" | "shouldComponentUpdate" | "componentWillUnmount" | "componentDidCatch" | "getSnapshotBeforeUpdate" | ... еще 6 ... | "UNSAFE_componentWillUpdate" '. ts (2345) "*.

Я попытался привести экземпляр к типу 'Any' - 

const instance = wrapper.instance() as any;

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

Невозможно отследить свойство validateBeforeSave, так как оно не является функцией;вместо этого дано неопределенное значение 

// Some function Component

const SomeComponent = (props: IMyComponentProps) => {
  const { classes } = props;

  // Component has state
  const [count, setCount] = useState(0);

  function validateBeforeSave(){

  }

  function handleClick() {
  validateBeforeSave();
  .
  .
  .
  }

  return (
   <div>
      <Button>
      className="saveBtn"
      onClick={handleClick}
      </Button>
    </div>
  );

  };

  // Unit test
  describe('SomeComponent' () => {
  it('validates model on button click', () => {
      const wrapper = mount(
        <MuiThemeProvider theme={theme}>
          <SomeComponent/>
        </MuiThemeProvider>,
      );
  const instance = wrapper.instance();
      const spy = jest.spyOn(instance, "validateBeforeSave");
  wrapper
        .find('.saveBtn')
        .at(0)
        .simulate('click');
      expect(spy).toHaveBeenCalledTimes(1);
    });
  }

Что мне здесь не хватает?Как spyOn работает с компонентами функций?

Я создал приложение, используя шаблон create-реагировать на приложение, и у него есть эти зависимости для тестовых пакетов 

"devDependencies": {
    "ts-jest": "^23.10.3",
    "@types/jest": "24.0.9",
    "@types/enzyme": "^3.9.1",
    "@types/enzyme-adapter-react-16": "^1.0.2",
    "enzyme": "^3.9.0",
    "enzyme-adapter-react-16": "^1.11.2",
    "enzyme-to-json": "^3.3.5",
  }

1 Ответ

0 голосов
/ 24 мая 2019

Публикация моего комментария здесь снова, чтобы ответить на ваш вопрос: ваша validateBeforeSave функция объявлена ​​в SomeComponent, что делает ее закрытой / закрытой областью действия, недоступной снаружи.Вы можете передать эту функцию в качестве реквизита, а затем создать шпиона и передать его в качестве значения реквизита в своем тесте и проверить, была ли вызвана пропущенная функция (шпион) или нет

Таким образом, вы изменили бы свойфункционировать примерно так: 

// some validator function
function validateBeforeSave(){
  ...
}

// Some function Component

const SomeComponent = (props: IMyComponentProps) => {
  const { classes, validateBeforeSave } = props;

  // Component has state
  const [count, setCount] = useState(0);


  function handleClick() {
  validateBeforeSave();
  .
  .
  .
  }

  return (
   <div>
      <Button>
      className="saveBtn"
      onClick={handleClick}
      </Button>
    </div>
  );

};

А в вашем модульном тесте примерно так: 

  // Unit test
  describe('SomeComponent' () => {
  it('validates model on button click', () => {
      const validateSpy = jest.fn();
      const wrapper = mount(
        <MuiThemeProvider theme={theme}>
          <SomeComponent validateSpy={validateSpy}/>
        </MuiThemeProvider>,
      );
      const instance = wrapper.instance();
      wrapper
        .find('.saveBtn')
        .at(0)
        .simulate('click');
      expect(validateSpy).toHaveBeenCalledTimes(1);
    });
  }
...