Как набрать экземпляр компонента при тестировании с помощью Enzyme?

Question

Учитывая, что у меня есть такой компонент

interface IState {
  foo
}

interface IProps {
  bar
}

export class MyComp extends Component<IProps, IState> {
  state = {
    foo: 'cool'
  }
}

Какой тип я должен указать для его экземпляра в ферменте?

    const instance = wrapper.instance()

    expect(instance.state.foo).toEqual('value') 
     // I get type error
     // [ts] Property 'foo' does not exist on type 'Readonly<{}>'

Answer 1

Тип возврата shallow является общим . Таким образом, вы можете передать типы для Props и State.

const componentTree: ShallowWrapper<IProps, IState> = shallow(<MyComponent {...props}/>);   
const instance = componentTree.instance(); 
expect(instance.state.foo).toBe(bar);

Enzyme предоставляет метод API для доступа к состоянию компонента, поэтому вы можете напрямую использовать этот метод в ShallowWrapper для доступа к состоянию компонента следующим образом:

const componentTree: ShallowWrapper<IProps, IState> = shallow(<MyComponent {...props}/>); 
expect(componentTree.state().foo).toBe(bar);

Оба вышеуказанных подхода будут работать.