Как проверить реагирующий контекст, используя шутку и фермент, где контекст используется внутри конструктора? - PullRequest
Новая
       27

Как проверить реагирующий контекст, используя шутку и фермент, где контекст используется внутри конструктора?

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

Я использую реагирующий контекст для сохранения моих данных и доступа к данным внутри конструктора, как показано: 

    class MyComponent extends Component {
      //constructor
      constructor(props, context) {
          super(props, context);

          const { testData } = this.context.storedData

          this.state={
          //maintained states
          }
      }
      //constructor ends
    }

Я пытаюсь протестировать реагирующий контекст с использованием среды jest и фермента, но получаю ошибку какниже: 

  TypeError: Cannot read property 'testData ' of undefined

  25 |   constructor(props, context) {
  26 |     super(props, context);
> 27 |     const { testData  } = this.context.storedData
     |             ^

Я пробовал большинство решений, но ничего не работает. Я ищу идеальное решение, которое подходит для моего случая.

1 Ответ

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

Никогда не работал с Legacy Context, а его страница документации довольно скудная. Чтобы протестировать компонент, который зависит от контекста, вы должны передать этот контекст, и есть несколько вариантов.

  1. Энзим mount() / shallow() предоставляет второй аргумент options, которыйможет использоваться для передачи контекста. Но я не уверен, работает ли он в контексте Legacy 
const wrapper = mount(<MyComponent />, { context: {storedData: {testData: 1} } });
Используйте дополнительную обертку для предоставления контекста: 
function createWrapperForContext (contextData) {
  return class Wrapper extends React.Component {
    getChildContext() {
      return contextData;
    }

    render() {
      return this.props.children;
    }
  };
}
....
const ContextWrapper = createWrapperForContext(testData);
const elementWrapper = mount(<ContextWrapper><YourComponent /></ContextWrapper>)

Если возможно, предпочтительнее перейти на современный Context API, это гораздо удобнее.

PS зачем вам нужен доступ context в конструкторе? Если бы вы работали с ним в render(), вы бы никогда не беспокоились о том, что «контекст обновлен, но render() все еще ссылается на старые значения».

...