Typescript: тип компонента React не найден в тестовом файле

Question

Я пытался протестировать компонент реакции с Jest (Enzyme) в файле .tsx (т.е. Typescript), следуя этому посту и этому посту .

Вот фрагмент моего кода.

( РЕДАКТИРОВАТЬ : Спасибо, @WillJenkins! Я обновил этот фрагмент после прочтения вашего совета)

describe('MyComponent', ()=>{
  const mockStore = createMockStore([thunk]);
  let store = mockStore({});      

  it('should render ChildComponent if getFoo is true', () => {
    let wrapper = mount(
        <Provider store={store}>
            <MyComponent />
        </Provider>
    );

    let instance = wrapper.find(MyComponent).instance() as MyComponent;
    // "MyComponent" shows a warning message,
    // saying "Cannot find name 'MyComponent'."

    instance().getFoo = jest.fn();
    instance().getFoo.mockImplementation(() => true);

    instance.update();

    expect(instance.contains(<ChildComponent />)).toBe(true);
  });
});

По какой-то причине MyComponent после ключевого слова as невозможно найти, когда я использую его как тип wrapper.instance().

Если я наведу на него курсор, появится «Cannot find name 'MyComponent'.»

(странно, MyComponent в пределах find()) не дает никакого предупреждения)

Если я заменю

let instance = wrapper.find(MyComponent).instance() as MyComponent;

с

wrapper.find(MyComponent).instance().getFoo = jest.fn()

..., это приводит к другому предупреждающему сообщению о том, что "Property 'getFoo' does not exist on type 'Component<any, any, any>'"

Если я поставлю any вместо MyComponent, он не выдаст предупреждение, но сам тест приведет к ошибке типа (instance.update() is not a function)

Каков правильный тип для instance()? Я не могу найти подсказку в Джесте и энзимном документе.

Любой совет будет оценен.

Answer 1

Ваша оболочка не <MyComponent>, это <Provider>.

Вам нужно использовать find , чтобы найти MyComponent в вашем смонтированном дереве:

let instance = wrapper.find(MyComponent).instance();