reactjs - Jest 测试组件的内部方法

Question

我正在使用 react native 0.40 和 jest 20。当我试图测试一个组件的内部方法时，我失败了，因为我无法获取它的实例，然后调用该方法。

例如，我可以使用类似快照的方式测试呈现的组件

it('renders correctly', () => {
    var store = mockStore(initialState);

    const tree = renderer.create(
        <Provider store={store}>
            <App/>
        </Provider>
    ).toJSON()

    expect(tree).toMatchSnapshot()
})

但是如果我尝试测试 App 组件的内部方法，我找不到任何方法来访问它。 所以下面的代码不会运行

it("checks version number correctly", () => {
    var store = mockStore(initialState);

    const tree = renderer.create(
        <Provider store={store}>
            <App/>
        </Provider>
    )

    expect(tree.needsUpdate("1.0.0")).toBe(true)
})

有些人使用的解决方案是“react-test-renderer/shallow”或“enzyme”来浅渲染组件并访问内部方法，但是我导入时找不到第一个(可能与RN版本有关？)和 enzyme 无法正确安装(也许又是一个依赖性问题)。所以我想知道的是，测试内部方法的最佳方法是什么。

Answer 1

您不必实际将您的组件包装在提供程序中。如果你只是想测试你的组件，你可以在没有 connect()() 的情况下导出它。例如:

export class App extends React.Component {
   // your things
}

export default connect()(App);

在您的测试文件中，您可以像这样导入您的应用:

import ConnectedApp, { App } from "../App";

然后当你想测试你封装的App时，你可以像对待任何其他标准组件一样对待它:

const props = {
  // mocked-out props your store would provide
};
const component = shallow(<App {...props} />);
component.instance().whateverMethodYouWant();

就我个人而言，除非我需要render 并且更深层的组件是connected，否则我从不将组件包装在模拟提供程序中。