Как выполнить модульное тестирование функций внутри componentwillmount с помощью шутки и энзима?

Я пытаюсь протестировать функцию внутри componentWillMount.

составная часть

componentWillMount = () => {
const {
  agents,
  match
} = this.props;
this.edit = false;
this.agent = {};
if (match.params.id) {
  this.edit = true;
  this.agent = getAgent(agents, match.params.id);
  if ("undefined" === typeof this.agent) {
    push("/agents");
  }
}
resetStatusMessage();
formResetError();
};

render = () => {
    const { form } = this.props;
    const agent = this.agent;
    this.avatar = agent.avatar;
    ...........................
}

Я пытаюсь проверить, вызывается ли функция getAgent. И мне также нужно проверить, были ли вызваны resetStatusMessage () и formResetError ().

Тесты:

it("should call getAgent when mounted", () => {
const match = {
params: {
  id: "1"
}
},
agents ={
loading: false,
byId : {
  1:{
    firstName: "abc",
    lastName: "xyz"
  }
},
avatar: "avatarUrl"
};
let mockGetAgent = jest.fn();
const store = configureStore();
const wrapper = mount(
<Provider store={store}>
  <AgentForm match={match} getAgent={mockGetAgent}/>
</Provider>
);
expect(wrapper).toBeDefined();
expect(mockGetAgent).toBeCalled();
});

Но мой тест не удался с этим сообщением:

TypeError: Cannot read property 'avatar' of undefined

Как я могу решить эту проблему? В моем проекте React я использую шутку и энзим для тестирования.am new to react и энзим. Любая помощь будет действительно ощутимой.


reactjs unit-testing jestjs enzyme
person Khushi    schedule 20.09.2017    source источник
comment
где определены getAgent() и другие функции? Похоже, вы создали фиктивную функцию, но не передали ее компоненту.   -  person Billy Reilly    schedule 20.09.2017
comment
обновлен в коде.   -  person Khushi    schedule 21.09.2017

Ответы (1)


arrow_upward
0
arrow_downward

Извините, я не имел в виду, что вам нужно передать это как опору. Это будет работать только в том случае, если компонент обычно получает функцию getAgent в качестве опоры.

Я предполагаю, что getAgent - это функция, определенная в том же файле, что и ваш компонент, но вне самого компонента, и что вы экспортируете только компонент?

В этом случае при монтировании компонента он будет искать getAgent в своей области и пытаться вызвать его. На данный момент вы создали функцию с именем mockGetAgent, но компонент никогда не вызывает mockGetAgent. Я думаю, что вам нужно вызвать свой макет getAgent и заставить его что-то вернуть (например, объект, который выглядит как один из ваших агентов), чтобы this.agent не был undefined

Также пара замечаний по модульному тестированию:

  1. вам следует попробовать тестировать свои компоненты изолированно. Здесь вы тестируете и Provider, и AgentForm одновременно, но, учитывая, что каждый из них выполняет определенные функции, вы должны просто попробовать проверить, что каждый из них выполняет свою работу.
  2. не очень эффективно тестировать компонент, проверяя, что каждая функция, которую он использует, вызывается. Вы должны попытаться проверить, что работа, которую выполняет функция, была выполнена. Например. если функция getAgent получает информацию об агентах, чтобы ее можно было отобразить, вам следует проверить, что ваша оболочка содержит эту информацию, а не проверять, был ли вызван getAgent
person Billy Reilly    schedule 21.09.2017
comment
Спасибо за быстрый ответ. Как вы предложили, я создаю объект (агент). Примерно так: let agent = {firstName: test, lastName: mock, email: [email protected]}; агент = mockGetAgent (агенты, match.params.id); Вы имели в виду это? - person Khushi; 22.09.2017
comment
да, объект агента выглядит нормально, но попробуйте издеваться над getAgent следующим образом: const getAgent = jest.fn (). mockReturnValueOnce (agent); - person Billy Reilly; 23.09.2017