Как протестировать реагирующий компонент с помощью ловушек с помощью библиотеки реагирующего тестирования - PullRequest
Новая
       89

Как протестировать реагирующий компонент с помощью ловушек с помощью библиотеки реагирующего тестирования

0 голосов
/ 07 ноября 2019

Я пытаюсь протестировать компонент, использующий хук useTheme, предоставленный emotion.js. Тема устанавливается во время инициализации приложения.

Теперь, когда я пишу свои тестовые случаи, ловушка 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'
};

Ошибка: Uncaught [Ошибка типа: Не удается прочитать свойство 'backgroundColor' из неопределенного]

1 Ответ

1 голос
/ 07 ноября 2019

Вы должны обернуть свой компонент с 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

...