如何使用带有钩子的反应功能组件测试句柄 function 调用

Question

I'm trying to write unit tests for a fairly simple tab bar I made with Material ui.

Basically I just want to test whether or not the handleTabChange function was called when a tab was clicked, and that the right value was passed in. I also wanted to test if the routing worked, ie if testing the 'Feed' button took you to /feed but I couldn't get that to work either.

TabBar.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); }); });

Right now I'm getting an error that wrapper.instance() returns null - and I have just learned that you can't use it with stateless functional components.

Does anyone know how I can test the function / and or the that the path changes when I click on one of these tabs?

Answer 1

I think you should export named constant along with your default export.

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);

And then in your test, import the named constant instead of the default.

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);
  });
});

Didn't test it, but it should work.