如何使用帶有鈎子的反應功能組件測試句柄 function 調用

Question

我正在嘗試為我用 Material ui 制作的一個相當簡單的標簽欄編寫單元測試。

基本上我只想測試在單擊選項卡時是否調用了handleTabChange function，並且傳入了正確的值。我還想測試路由是否有效，即測試“Feed”按鈕是否將您帶到/feed但我也無法讓它工作。

標簽欄.jsx

 import React, { useState } from 'react'; import { Tabs, Tab } from '@material-ui/core'; import { withRouter } from 'react-router-dom'; import { object } from 'prop-types'; import { tabToPathnameMap, pathnameToTabMap } from '../../constants/constants'; const TabBar = (props) => { const { history, location } = props; const { pathname } = location; const handleTabChange = (e, newValue) => { setCurrentTab(newValue); history.push(tabToPathnameMap[newValue]); }; const [currentTab, setCurrentTab] = useState( pathnameToTabMap[pathname]? pathnameToTabMap[pathname]: false ); return ( <Tabs value={currentTab} onChange={(e, newValue) => handleTabChange(e, newValue)} centered > <Tab label="Feed" tabBar-tab-testId="Feed" /> <Tab label="Fork" tabBar-tab-testId="Fork" /> <Tab label="Favs" tabBar-tab-testId="Favs" /> </Tabs> ); }; TabBar.propTypes = { history: object, location: object }; export default withRouter(TabBar);

TabBar.test.jsx

 import React from 'react'; import { mount } from 'enzyme'; import { MemoryRouter } from 'react-router-dom'; import TestComponentWrapper from '../../TestComponentWrapper'; import TabBar from '../../../Components/TabBar/TabBar'; describe('TabBar', () => { it('should move to /fork when the fork tab is clicked', () => { const wrapper = mount( <TestComponentWrapper> <MemoryRouter initialEntries={['/']}> <TabBar /> </MemoryRouter> </TestComponentWrapper> ); const spy = jest.spyOn(wrapper.instance(), 'handleTabChange'); expect(spy).toHaveBeenCalledTimes(0); wrapper.find('[tabBar-tab-testId="Fork"]').hostNodes().simulate('click'); expect(spy).toHaveBeenCalledTimes(1); }); });

現在我收到一個錯誤，即wrapper.instance()返回 null - 我剛剛了解到您不能將它與無狀態功能組件一起使用。

有誰知道我如何測試 function / 或者當我單擊這些選項卡之一時路徑會發生變化？

Answer 1

我認為您應該將命名常量與默認導出一起導出。

import React, { useState } from 'react';
import { Tabs, Tab } from '@material-ui/core';
import { withRouter } from 'react-router-dom';
import { object } from 'prop-types';
import { tabToPathnameMap, pathnameToTabMap } from '../../constants/constants';

//CHANGED THIS LINE
export const TabBar = (props) => {
  const { history, location } = props;
  const { pathname } = location;

  const handleTabChange = (e, newValue) => {
    setCurrentTab(newValue);
    history.push(tabToPathnameMap[newValue]);
  };

  const [currentTab, setCurrentTab] = useState(
    pathnameToTabMap[pathname] ? pathnameToTabMap[pathname] : false
  );

  return (
    <Tabs
      value={currentTab}
      onChange={(e, newValue) => handleTabChange(e, newValue)}
      centered
    >
      <Tab label="Feed" tabBar-tab-testId="Feed" />
      <Tab label="Fork" tabBar-tab-testId="Fork" />
      <Tab label="Favs" tabBar-tab-testId="Favs" />
    </Tabs>
  );
};

TabBar.propTypes = {
  history: object,
  location: object
};

export default withRouter(TabBar);

然后在您的測試中，導入命名常量而不是默認值。

import React from 'react';
import { mount } from 'enzyme';
import { MemoryRouter } from 'react-router-dom';
import TestComponentWrapper from '../../TestComponentWrapper';
//CHANGED THIS LINE
import { TabBar } from '../../../Components/TabBar/TabBar';

describe('TabBar', () => {
  it('should move to /fork when the fork tab is clicked', () => {
    const wrapper = mount(
      <TestComponentWrapper>
        <MemoryRouter initialEntries={['/']}>
          <TabBar />
        </MemoryRouter>
      </TestComponentWrapper>
    );
    const spy = jest.spyOn(wrapper.instance(), 'handleTabChange');
    expect(spy).toHaveBeenCalledTimes(0);
    wrapper.find('[tabBar-tab-testId="Fork"]').hostNodes().simulate('click');
    expect(spy).toHaveBeenCalledTimes(1);
  });
});

沒有測試它，但它應該工作。