Как проверить время вызова метода в реагирует подключенного компонента DidMount - PullRequest
Новая
       9

Как проверить время вызова метода в реагирует подключенного компонента DidMount

0 голосов
/ 08 октября 2018

Я пытаюсь протестировать компонент реаги-редукса, используя Jest и Enzyme.

Я прошел базовые тесты рендеринга, но не могу проверить время вызова пользовательского метода в componentDidMount.

MyButton.jsx 

class MyButton extends React.Component {
  constructor(props) {
    this.handleDataLoad = this.handleDataLoad.bind(this);
  }
  componentDidMount() {
    this.handleDataLoad();
  }
  handleDataLoad() {
    console.log('handleDataLoad call');
  }
  render() {
    {/* ... */}
  }
}
const mapStateToProps = state => (/* ... */);

export default connect(mapStateToProps)(MyButton);

MyButton.spec.jsx 

import React from 'react';
import { shallow } from 'enzyme';
import configureStore from 'redux-mock-store';
import thunk from 'redux-thunk';
import MyButton from './MyButton';

const middlewares = [thunk];
const mockStore = configureStore(middlewares);

describe('MyButton', () => {
  const initialState = {};
  const props = {
    /* ...required props... */
  };
  const store = mockStore(initialState);
  const component = shallow(<MyButton store={store} {...props} />);
  const didMount = jest.spyOn(OrderBook.prototype, 'componentDidMount');
  const mockHandleDataLoad = jest.spyOn(component.dive().instance(), 'handleDataLoad');

  describe('with enzyme', () => {
    it('called componentDidMount', () => {
      expect(didMount).toHaveBeenCalledTimes(1);
    }); // this is passed.

    it('called handleScrollEventAttach', () => {
      expect(mockHandleScrollEventAttach).toHaveBeenCalledTimes(1);
    }); // this is fail. 
  });
});

Второе тестовое сообщение «Ожидается, что фиктивная функция была вызванавремя, но он был вызван ноль раз. "

Я думаю, 'handleDataLoad' должен был быть вызван один раз, потому что был вызван componentDidMount.Но это не так.

Как узнать время вызова метода handleDataLoad в методе жизненного цикла реагирования?это невозможно?

package.json 

"react": "15.6.2",
"react-dom": "15.6.2",
"react-redux": "5.0.7",
"redux": "3.7.2",
"babel-jest": "23.2.0",
"enzyme": "^3.7.0",
"enzyme-adapter-react-15": "^1.1.1",
"enzyme-to-json": "^3.3.4",
"react-test-renderer": "15.6.1",
"redux-mock-store": "^1.5.3",

Ответы [ 2 ]

0 голосов
/ 08 октября 2018

const mockHandleDataLoad = jest.spyOn (component.dive (). Instance (), 'mockHandleDataLoad');

должно быть 

const mockHandleDataLoad = jest.spyOn(component.dive().instance(), 'handleDataLoad');

, так как вы шпионите за экземпляром компонента, вы должны указать реальное имя функции.

Также я заметил, что вы издеваетесь над магазином, действительно ли вы хотите протестировать подключенный компонент?Вы можете проверить только внутренний компонент, экспортировав его, отметив https://github.com/reduxjs/redux/blob/master/docs/recipes/WritingTests.md

0 голосов
/ 08 октября 2018

Я бы порекомендовал разделить MyButton.jsx на: 

MyButton/Component.jsx (holds your component implementation)

MyButton/Container.js (will connect your component to Redux store)

Таким образом, вы сможете без проблем протестировать свой компонент.И вы сможете заменить Redux в случае необходимости в будущем.

...