How to test react component with hooks using react testing library

Question

I am trying to test a component which use useTheme hook provided by emotion.js. The theme is set during the app initialization.

Now when I write my test cases, the useTheme hook is unable to fetch the styles data as only header component is getting mounted for testing. How to mock the data provided by hooks.

app.js

import { theme } from '../src/utils/styles/themes/default';

const AppRoot = ({ path, Router }) => {
  const routeRenderFunction = (props) => <RouteHandler route={props} />;
  return (
        <ThemeProvider theme={theme}>
          <Router location={path} context={{}}>
            <Switch>
              {routePatterns.map((routePattern) => (
                <Route key={routePattern} path={routePattern} render={routeRenderFunction} />
              ))}
            </Switch>
          </Router>          
        </ThemeProvider>      
  );
};

header.js

import React from "react";
import { css } from "emotion";
import { useTheme } from "emotion-theming";
import * as styles from "./Header.style";

const Header = ({userName = 'Becky Parsons', clinicName = 'The University of Southampton'}) => {
  const theme = useTheme();

  return (
    <div className={css(styles.accountDetails(theme))}>
      <div className={css(styles.accountContainer)}>
        <div className={css(styles.accountSpecifics)}>
          <h5 className={css(styles.accountDetailsH5(theme))} data-testid="user-name">{userName}</h5>
          <h6 className={css(styles.accountDetailsH6(theme))} data-testid="clinic-name">
            {clinicName}
          </h6>
        </div>
        <div className={css(styles.avatar)} />
      </div>
    </div>
  );
};

export default Header;

header.test.js

import React from 'react'
import {render} from '@testing-library/react';
import Header from './Header';


test('Check if header component loads', () => {    
    const { getByTestId } = render(<Header userName='Becky Parsons' clinicName='The University of Southampton'/>);
    expect(getByTestId('user-name').textContent).toBe('Becky Parsons');
    expect(getByTestId('clinic-name').textContent).toBe('The University of Southampton');
  })

header.style.js

export const accountDetails = theme => ({
  height: '70px',
  backgroundColor: theme.header.backgroundColor,
  textAlign: 'right',
  padding: '10px 40px'
});
export const accountContainer = {
  display: 'flex',
  justifyContent: 'flex-end'
};

Error: Uncaught [TypeError: Cannot read property 'backgroundColor' of undefined]

score 1 · Accepted Answer · answered Nov 07 '19 at 05:21

You should wrap your component with ThemeProvider, try this;

test('Check if header component loads', () => {
  const { getByText } = render(
    <ThemeProvider theme={your theme object...}>
      <Header userName='Becky Parsons' clinicName='The University of Southampton'/>
    </ThemeProvider >
  );

  ...
});

and you can look here: https://github.com/emotion-js/emotion/blob/master/packages/emotion-theming/tests/use-theme.js

How to test react component with hooks using react testing library

1 Answers1