Как обойти поверхностный компонент, вложенный в ThemeProvider HOC?

В связи с проблемой на Github у меня есть компонент Comp, который при экспорте обернут injectSheet из reactjss. Пожалуйста, ознакомьтесь с настройками в codesandbox.

В модульном тесте я хотел бы утверждать, что этот компонент содержит <a>, что он и делает (см. codeandbox), но тест все равно не проходит:

describe("<Comp /> component", () => {
  const wrapper = shallow(<Comp />);

  it("should render a <a>", () => {
    expect(wrapper.find('a')).to.have.length(1);
  });
});

Я получаю Error: [undefined] Please use ThemeProvider to be able to use WithTheme. Поэтому моей естественной (возможно, неправильной?) реакцией было обернуть компонент ThemeProvider:

const wrapper = shallow(
  <ThemeProvider theme={{}}>
    <Comp />
  </ThemeProvider>
)

Тогда я получаю AssertionError: expected { length: 0 } to have a length of 1 but got 0.

Я испробовал множество подходов, включая вызов dive, find или first с дополнительным вызовом shallow, но всегда получал Please use ThemeProvider to be able to use WithTheme:

// 1. dive(), as suggested in
// https://github.com/cssinjs/react-jss/issues/30#issuecomment-268373765
expect(wrapper.dive('Comp')).to.have.length(1);
expect(wrapper.dive('Comp').find('a')).to.have.length(1);
expect(wrapper.dive().find('a')).to.have.length(1);

// 2. find() / first(), as suggested in https://github.com/airbnb/enzyme/issues/539
expect(wrapper.find(Comp).shallow().find('a')).to.have.length(1);
expect(wrapper.first().shallow().find('a')).to.have.length(1);

Любые идеи здесь? Я немного новичок в модульном тестировании с React, поэтому был бы признателен, если бы кто-нибудь просветил меня по этому поводу;)


reactjs javascript enzyme jss
person Alex    schedule 07.12.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Для тех, кто все еще борется с этим, один жизнеспособный подход был предложен на GitHub. Вместо тестирования стилизованного компонента, обернутого injectSheet HOC, вы экспортируете автономный компонент и тестируете его изолированно.

// Component.js
import React from 'react'
import injectSheet from 'react-jss'

const styles = {
  color: 'burlywood'
}

// named export for unit tests
export const Component = props => <h1>Component</h1>

// default export to be used in other components
export default injectSheet(styles)(Component)

который будет работать для большинства случаев использования, поскольку чаще всего вам нужно тестировать простой компонент и его логику, а не какой-либо связанный с ним стиль. Итак, в вашем модульном тесте просто выполните

import { Component } from './Component'

вместо (что вы бы сделали в остальной части вашей кодовой базы)

import Component from './Component'
person Alex    schedule 02.06.2018