Юнит-тестирование контекстного API HOC - PullRequest
Новая
       22

Юнит-тестирование контекстного API HOC

0 голосов
/ 28 октября 2018

У меня есть компонент HOC, который оборачивает контекстный API React следующим образом 

import React from 'react';
import { AppContext } from './Context';

export function withAppContext(Component) {
    return function WrapperComponent(props) {
        return (
            <AppContext.Consumer>
                {state => <Component {...props} context={state} />}
            </AppContext.Consumer>
        );
    };
}

и другой компонент, который использует этот HOC как таковой 

class Hello extends Component {
    render() {
        return (
            <Fragment>
                <p>{this.props.context.state.name}</p>
                <p>{this.props.context.state.age}</p>
                <p>{this.props.user}</p>
            </Fragment>
        )
    }
}

export default withAppContext(Hello);

Я планирую написать модульный тест для тестирования компонента Hello. Для этого у меня есть следующий юнит-тест 

const getAppContext = (context = {
        state : {
            "name" : "Jane Doe",
            "age" : 28
        }
    }) => {

  // Will then mock the AppContext module being used in our Hello component
  jest.doMock('../../../context/Context', () => {
    return {
      AppContext: {
        Consumer: (props) => props.children(context)
      }
    }
  });

  // We will need to re-require after calling jest.doMock.
  // return the updated Hello module that now includes the mocked context
  return require('./Hello').Hello;
};

describe('Hello', () => {
    test('Verify state from Context API', ()=> {
        const Hello = getAppContext();
        const wrapper = mount(<Hello />);

    })

})

Но на этой линии это не получается const wrapper = mount(<Hello />); со следующим сообщением 

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your componentfrom the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `WrapperComponent`.

  46 |      test('Verify state from Context API', ()=> {
  47 |              const Hello = getAppContext();
> 48 |              const wrapper = mount(<Hello />);         |                              ^
  49 |              expect(wrapper.find('li').hostNodes().length).toBe(2);
  50 |              expect(wrapper.html()).toBe("<ul><li>Name : Jane Doe</li><li>Age : 28</li></ul>")
  51 |      })

Не могли бы вы дать мне знать, что я здесь делаю не так?

Спасибо

1 Ответ

0 голосов
/ 28 октября 2018

В ./Hello.js экспорт по умолчанию - HOC.

Экспорт по умолчанию должен быть возвращен в getAppContext, так как имя "Hello" - undefined в необходимом модуле. 

return require('./Hello').default;
...