如何使用反应测试库测试带有钩子的反应组件答案

【问题标题】：How to test react component with hooks using react testing library如何使用反应测试库测试带有钩子的反应组件
【发布时间】：2019-11-07 05:09:40
【问题描述】：

我正在尝试测试一个使用由emotion.js 提供的useTheme 钩子的组件。主题是在应用初始化期间设置的。

现在，当我编写测试用例时，useTheme 挂钩无法获取样式数据，因为只有标头组件正在安装以进行测试。如何模拟 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'
};

错误：未捕获 [TypeError：无法读取未定义的属性“背景颜色”]

【问题讨论】：

标签： reactjs react-hooks react-testing-library

【解决方案1】：

你应该用 ThemeProvider 包装你的组件，试试这个；

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

  ...
});

你可以看这里：https://github.com/emotion-js/emotion/blob/master/packages/emotion-theming/tests/use-theme.js

【讨论】：