Typescript：在测试文件中找不到 React 组件的类型

Question

我一直在尝试的是在 .tsx 文件（即 Typescript）中使用 Jest（酶）测试反应组件，遵循 this post 和 this post。

这是我的代码的 sn-p。

（编辑：谢谢@WillJenkins！我在阅读了您的建议后更新了这个sn-p）

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);
  });
});

由于某种原因，as 关键字后面的MyComponent 在我用作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() 的正确类型是什么？我在 Jest and Enzyme 的文档中找不到任何线索。

我们将不胜感激。

Answer 1

您的包装器不是<MyComponent>，而是<Provider>。

您需要使用find 在已挂载的树中找到您的MyComponent：

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