如何使用react测试库测试带有钩子的react组件

Question

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

现在，当我编写测试用例时，useTheme钩子无法获取样式数据，因为只有头组件被挂载进行测试。如何模拟钩子提供的数据。

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:无法读取未定义的属性"backgroundColor"]

Answer 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/测试/use-theme.js