score:0
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.
Source: stackoverflow.com
Related Query
- How to test a handle function call with a react functional component with hooks
- How to test a function inside React functional component using jest.spyOn with React Testing Library
- How to test the state of a functional component in React with Jest (No Enzyme)
- React 16: Call children's function from parent when using hooks and functional component
- react functional component with ag grid cannot call parent function via context
- How to test with jest and typescript with types a basic react function component
- In React, how do I call a function in one component (which is being rendered with React Router) from another component?
- How to handle asynchronous fetch from Database with Gatsby or React functional component
- How do I convert a component with a constructor function and props, to a functional component using hooks and props
- When passing a React functional Component as a parameter of a function, how should I declare the function parameter type with TS
- How to convert React class component to functional component with hooks
- How to test react functional component async call
- How to get handle on current object with a React function component
- How to test arrow function calling in react component with jest?
- React call from class to functional component. Error: Invalid hook call. Hooks can only be called inside of the body of a function component
- How to unit test a React functional component using hooks useEffect,useDispatch and useSelector and Redux?
- How to call a function with arguments onclick of a button in a react component
- How to call a function from different component using React with Redux Form?
- React functional component test file unable to update state value and call its props function
- How to convert a React class component to a function component with hooks to get firebase data
- How to test react component with onClick function Jest/React testing library
- How to test React component that uses React Hooks useHistory hook with Enzyme?
- How to test react component with hooks using react testing library
- React snapshot test with Jest, how can a child component calls a function from parent component?
- how to test react arrow function dealing with statefull component state
- How to test a function call after state receive value inside expression in React function component using Jest
- How to Add Redux function as a Parameter with Props in React Functional Component
- How to call loading function with React useEffect only once
- How to use children with React Stateless Functional Component in TypeScript?
- Testing React Functional Component with Hooks using Jest
More Query from same tag
- "datalabels" property applied to all "datasets"
- React componentDidUpdate makes infinit API calls on state change
- how to pass props to a component via onClick event?
- react getting observable values in component
- Difference in conditional rendering (React)
- Passing ref via props in React to prevent duplication of commonly used functionality
- State inside mapDispatchToProps
- Specify initial value for radio button
- Module not found: Can't resolve '@material-ui/icons/ContentCut'
- Redux form state is lost when user navigates away
- React Router redirects all requests to "/"
- How to use array in jest cli option --testPathIgnorePatterns?
- How can I make a flex component have bottom fixed to browser bottom but top position dynamic
- How to create custom validation from react hook form?
- What would the propType be of a JSX prop in react
- React Conditional Rendering: How can hide the Button when the array "Name" has more than two values?
- MUI Selection of an Object (MUI: You have provided an out-of-range value)
- Center Form on page with Flexbox and Material UI
- Input field does not allow me to type - REACT JSX
- React component isn't updated when using Routes?
- Deployment Symfony 4 with React js application on Heroku
- React JS ref (useRef): contains is not a function
- React useCallback function runs in infinite loop
- Typescript dynamic type depends on value (generic)
- How to refresh a Page using react-route Link
- Reactjs promise.all order of calls
- How do I use material-ui themed error style (color) for non-form text
- How to use a Array as a prop for React component
- redux-persist: How to save state on browser's local storage?
- How to jsx format supported in spacevim editor?