Как передать тему эмоций на юнит-тесты? - PullRequest
Новая
       17

Как передать тему эмоций на юнит-тесты?

0 голосов
/ 06 февраля 2019

Необходимо пройти тему, чтобы правильно протестировать некоторые из моих компонентов, используя emotion ThemeProvider или API Theme.

На самом деле, я обнаружил ту же проблему с 'styled-components', он описал здесь .Согласно комментарию Владимира Пестерева, я получил эту API-оболочку: 

import * as React from 'react'
import { shallow, mount, render } from 'enzyme'
import { ThemeProvider } from 'emotion-theming'
import theme from '../themes/default';

function wrapWithTheme (fn: Function, children: React.ReactChild, options: any): React.ReactChild {
  const wrapper = fn(
    <ThemeProvider theme={theme}>
      { children }
    </ThemeProvider>,
    options
  )

  return wrapper[fn.name]({
    context: wrapper.instance().getChildContext(),
  })
}

export function shallowWithTheme (component: React.ReactChild, options?: any) {
  return wrapWithTheme(shallow, component, options);
}

export function mountWithTheme (component: React.ReactChild, options?: any) {
  return wrapWithTheme(mount, component, options);
}

export function renderWithTheme (component: React.ReactChild, options?: any) {
  return wrapWithTheme(render, component, options);
}

Когда я использую эти помощники в своих тестах, я получаю ошибку:

TypeError: wrapper.instance is notфункция

Похоже, это устаревший API.Есть другое решение от arka-na в теме, связанной выше, но я понятия не имею, как принять это к эмоции: 

import { ThemeConsumer } from 'styled-components'
import defaultTheme from '../somewhere/theme'

export const shallowWithTheme = (children, theme = defaultTheme) => 
{
   ThemeConsumer._currentValue = theme
   return shallow(children)
}

ОБНОВЛЕНИЕ Согласно Ичхаоз ответЯ закончил с этим фрагментом: 

import * as React from 'react'
import { shallow, mount, render } from 'enzyme'
import { channel, createBroadcast } from 'emotion-theming'
import * as PropTypes from 'prop-types';
import defaultTheme from '../themes/default';

const broadcast = createBroadcast(defaultTheme);

const defaultOptions = {
  theme: defaultTheme,
  context: {
    [channel]: broadcast
  },
  childContextTypes: {
    [channel]: PropTypes.object
  }
};

function wrapWithTheme (fn: Function, component: React.ReactChild, options: any): React.ReactChild {
  const mergedOptions = Object.assign({}, defaultOptions, options);
  return fn(component, mergedOptions);
}

export function shallowWithTheme (component: React.ReactChild, options?: any) {
  return wrapWithTheme(shallow, component, options);
}

export function mountWithTheme (component: React.ReactChild, options?: any) {
  return wrapWithTheme(mount, component, options);
}

export function renderWithTheme (component: React.ReactChild, options?: any) {
  return wrapWithTheme(render, component, options);
}

1 Ответ

0 голосов
/ 07 февраля 2019

Какую версию эмоций вы используете?Вы можете создать это с трансляцией в контекст.

jestHelper.js 

import { channel, createBroadcast  } from 'emotion-theming';
    const broadcast = createBroadcast(defaultTheme);

    const defaultOptions = {
      theme: defaultTheme,
      context: {
        [channel]: broadcast
      },
      childContextTypes: {
        [channel]: PropTypes.object
      }
    };



    export function mount(component, options) {
      return enzymeMount(
        component,
        {
          ...defaultOptions,
          options
        }
      );
    }

source: createBoradcast

Вам не нужно вручнуюдобавить <ThemeProvider>

...