Почему Jest / Enzyme tracking / слух componentDidMount или какой-либо React функционирует должным образом? - PullRequest
Новая
       6

Почему Jest / Enzyme tracking / слух componentDidMount или какой-либо React функционирует должным образом?

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

Я написал функцию, которая успешно проверяет срабатывание componentDidMount. Но по какой-то причине использование того же логика c для проверки, был ли запущен соседний метод, не работает. Не уверен почему? Может кто-нибудь сказать мне, что я неправильно понимаю?

// Аккаунт. js

...
componentDidMount() {
    this.checkData();
  }

checkData = () => {
   console.log('i am a check data method that needs testing');
  }
...

// Jest 

// this works
  it('should call the CDM function', () => {
    const instance = mountedComponent.instance();
    jest.spyOn(instance, 'componentDidMount');
    instance.componentDidMount();
    expect(instance.componentDidMount).toHaveBeenCalledTimes(1);
  })

// Attempt 1 - this fails "Cannot spy the checkData property because it is not a function; undefined given instead"

  it('should call the `checkData` function', () => {
    const instance = mountedComponent.instance();
    jest.spyOn(instance, 'checkData');
    instance.componentDidMount();
    expect(instance.checkData).toBeCalledTimes(1);
  })

// Attempt 2 - also fails "Received number of calls: 0"

  it('should call the `checkData` function', () => {
    const instance = mountedComponent.instance();
    instance.checkData = jest.fn();
    instance.componentDidMount();
    expect(instance.checkData).toBeCalledTimes(1);
  })

Почему CDM будет там в экземпляр но не checkData?>

1 Ответ

1 голос
/ 01 апреля 2020

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

Что на самом деле делает * 1003 (вы не показали). Вызывает ли он что-то в другом файле?

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

Например, : 

// component file
import { someMethod } from 'someModule';

export class MyComponent extends React.Component {

   async checkData() {
       await someMethod();
   }

   componentDidMount() {
      this.checkData();
   }

   render() {

   }
}

// in your spec file
import { someMethod } from 'someModule';

jest.mock('someModule');


someMethod.mockImplementation(() => {
  // do whatever you want here
});

// do your all your normal setup, probably something like this
let mountedComponent;
beforeEach(() => {
  mountedComponent = mount(...);
});

// clear the mock after each mount
afterEach(() => someMethod.mockClear());

it('should do things',() => {
   expect(someMethod).toHaveBeenCalled();
});
...