Как проверить функции, используемые в компоненте без состояния, который определен вне области действия компонента в Jest / Enzyme? - PullRequest
Новая
       8

Как проверить функции, используемые в компоненте без состояния, который определен вне области действия компонента в Jest / Enzyme?

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

Я пытаюсь написать тест для следующего: 

import React from 'react'
import Popup from 'some-library'

const popupConfig = {
  home: {
    popupValue: 'Hello World',
    popupValue: 'action',
    popupMessage: 'Get Started'
  },
  settings: {
    popupValue: 'Hello World',
    popupValue: 'action',
    popupMessage: 'Get Started'
  }
}

const closePopup = () => {
  Popup.closePopup()
}

const toggleNewPopup = () => {
  Popup.togglePopup('some-popup')
}

const GetStartedPopup = ({ moduleName }) => {
  if (!Object.keys(popupConfig).includes(moduleName)) return null
  const {
    popupValue = 'Hi there!',
    popupStyle = 'warning',
    popupMessage = 'Get Started',
    popupBtnFunction = toggleNewPopup
  } = popupConfig[moduleName]

  return (
    <Popup
      popupValue={popupValue}
      popupStyle={popupStyle}
      popupBtnValue={popupMessage}
      popupBtnStyle="neutral"
      popupBtnFunction={popupBtnFunction}
      xPopup={closePopup}
    />
  )
}

export default GetStartedPopup

Цель теста - убедиться, что вызваны функции closePopup и toggleNewPopup. Я делаю следующее, чтобы сделать это для closePopup function: 

import React from 'react'
import { mount } from 'enzyme'
import { Popup } from 'some-library'
import GetStartedPopup from 'widgets/getStartedPopup'

describe('<GetStartedPopup/>', () => {
    let wrapper
    let props
    beforeEach(() => {
        props = {
            page: 'home'
        }
        wrapper  = mount(<GetStartedPopup {...props}/>)
    })

    it('should render the component without crashing', () => {
        expect(wrapper).toBeDefined();
    })

    it('should call closePopup', () => {
        const spy = jest.spyOn(wrapper.instance(), 'closePopup');
        wrapper.instance().closePopup();
        expect(spy).toHaveBeenCalledTimes(1);
    })

    afterEach(() => {
        wrapper.unmount()
    })
})

Я просмотрел документы для spyOn и других SO-потоков, которые решают подобные проблемы, но не могут решить, как тестировать closePopup и toggleNewPopup функции для моего случая здесь. Когда я запускаю тестовый пример, написанный выше, я получаю это: TypeError: Cannot read property 'closePopup' of null. Как правильно написать тест, чтобы убедиться, что эти две функции вызваны?

1 Ответ

0 голосов
/ 14 января 2020

Забавно, что я сам столкнулся с этим на работе в отношении wrapper.instance() do c

Чтобы вернуть реквизиты для всего компонента React, используйте обертку. экземпляр (). реквизит. Это справедливо для компонентов с состоянием или без состояния в React 15. Но Wrapper.instance () вернет ноль для компонента React без состояния в React 16., поэтому в этом случае wrapper.instance (). Props вызовет ошибку.

Что касается сторонней библиотеки. Вы должны издеваться над всеми соавторами, которые использует ваш компонент. 

import { Popup } from 'some-library';
describe('<GetStartedPopup />', () => {
  let wrapper;

  jest.mock('some-library', () => {
    Popup: jest.fn(),
  });

  const initialProps = {
    page: 'home'
  };

  const getStartedPopup = () => {
    return mount(<GetStartedPopup {...initialProps});
  };

  beforeEach(() => {
    Popup.mockClear()
    wrapper = getStartedPopup();
  };

  it('should call closePopup', () => {
    expect(Popup.closePopup()).toHaveBeenCalledTimes(1);
  });
  ...
});
...