Как подсмотреть (используя Jest) метод дочернего компонента в ферменте? - PullRequest
Новая
       6

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

0 голосов
/ 26 февраля 2020

У меня есть компонент CustomerAccountDetails, который обернут внутри компонента Provider. Я шпионю за методом 'fetchAccountDetails' внутри компонента CustomerAccountDetails для accountId, который я предоставил

Ниже приведен код компонента CustomerAccountDetails: 

class CustomerAccountDetails extends React.Component {
    componentDidMount() {
      if(this.props.accountId) {
        this.props.fetchAccountDetails(this.props.accountId);
      }
    } 

    render() {
       return <AccountDetails details={this.props.accountDetails}/>
    }
}

const mapDispatchToProps = dispatch =>
  bindActionCreators(
    {
     fetchAccountDetails: accountId => getAccountDetails(accountId) 
    },
    dispatch
  );

const mapStateToProps = state => {
  return {
    accountDetails: state.accountDetails    
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(CustomerAccountDetails);

Ниже приведен фрагмент кода примера фермента. : 

it('should fetch account details for the account id provided', () => {
    const spyOn = jest.spyOn(
      CustomerAccountDetails.prototype,
      'fetchAccountDetails'
    );
    const wrapper = mount(
      <Provider store={store}>
        <CustomerAccountDetails accountId="1234" />
      </Provider>
    );
    expect(spyOn).toHaveBeenCalled();
  });

Но когда я запускаю приведенный выше тестовый пример, появляется сообщение об ошибке «Не удается разглядеть примитивное значение; дано неопределенное значение».

Как я могу решить эту проблему?

1 Ответ

0 голосов
/ 26 февраля 2020

Вы можете применить принцип инверсии управления и передать функцию в качестве опоры для компонента.

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

it('should fetch account details for the account id provided', () => {
    const fetchAccountDetailsMock = jest.fn();

    const wrapper = mount(
      <Provider store={store}>
        <CustomerAccountDetails 
            accountId="1234" 
            fetchAccountDetails={fetchAccountDetailsMock} // now you have control over it
        />
      </Provider>
    );

    expect(fetchAccountDetailsMock).toHaveBeenCalled();
  });
...