Jest SpyOn в Reactjs функциональном компоненте - PullRequest
Новая
       28

Jest SpyOn в Reactjs функциональном компоненте

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

Я пытаюсь SpyOn функцию внутри reactJS функционального компонента. Я видел несколько ответов и узнал о процедуре передачи функций в качестве подпорки нашему компоненту. Но этот метод не работает для меня. Поэтому я попытался использовать const spy = jest.spyOn(App.prototype, "sampleFunctionName"); Как и ожидалось, он выдает ошибку, говоря, что sampleFunctionName не определено, поскольку App.prototype не содержит его. Чтобы преодолеть это, я добавил sampleFunctionName в App.prototype как App.prototype.sampleFunctionName = jest.fn() и попытался шпионить за ним как 

wrapper = shallow(<App {...props} />);
wrapper.find("#btn-id").simulate("click")
expect(spy).toHaveBeenCalled()

Теперь проблема в том, что количество вызовов шпиона всегда равно нулю. Поэтому я хотел бы знать, является ли то, что я пробовал, правильным, или каким-либо другим способом шпионить за функцией внутри бесклассового компонента

Вот пример, демонстрирующий вышеупомянутое требование: 

function App(props){
  function save(){
    //contains the code for api calls and store changes
  }
  return(
    <Button id = "btn-id" onClick = {save}>Name</Button>
  )
}

И тестовый файл будет выглядеть так: 

import React from "react";
import { shallow } from "enzyme";
import {App} from './App'
describe('desc',() =>{
      ...
      const spy = jest.spyOn(App.prototype, "save");
      //using the above spy says "save" is undefined so added this line before using spy
      // App.prototype.save = jest.fn()

      wrapper = shallow(<App {...props} />);
      wrapper.find("#btn-id").simulate("click")
      expect(spy).toHaveBeenCalled()
})

1 Ответ

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

Вы не можете шутить или шпионить за save функцией, это закрытая функция в конструкторе App, НЕ является методом экземпляра приложения, что означает, что save функция не существует на прототип приложения . Вы должны издеваться или шпионить за функцией внутри функции save, функции / метода, которая делает вызовы API для вашего случая. Вот решение для модульного тестирования:

Например,

index.js: 

import React from 'react';

export function App(props) {
  function save() {
    // contains the code for api calls and store changes
    console.log('You should spy or mock the function which make the api calls');
  }
  return (
    <button id="btn-id" onClick={save}>
      Name
    </button>
  );
}

index.test.js: 

import React from 'react';
import { shallow } from 'enzyme';
import { App } from './';

describe('61174416', () => {
  it('should pass', () => {
    const logSpy = jest.spyOn(console, 'log');
    const props = {};
    const wrapper = shallow(<App {...props} />);
    wrapper.find('#btn-id').simulate('click');
    expect(logSpy).toHaveBeenCalled();
  });
});

Результаты модульного теста с 100% покрытие: 

 PASS  stackoverflow/61174416/index.test.tsx (8.332s)
  61174416
    ✓ should pass (19ms)

  console.log node_modules/jest-environment-enzyme/node_modules/jest-mock/build/index.js:866
    You should spy or mock the function which make the api calls

-----------|---------|----------|---------|---------|-------------------
File       | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
-----------|---------|----------|---------|---------|-------------------
All files  |     100 |      100 |     100 |     100 |                   
 index.tsx |     100 |      100 |     100 |     100 |                   
-----------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        9.395s

Замените console.log на функцию или метод, который делает вызовы API.

исходный код: https://github.com/mrdulin/react-apollo-graphql-starter-kit/tree/master/stackoverflow/61174416

...