Jest 测试组件的内部方法答案

【问题标题】：Jest test component's inner methodJest 测试组件的内部方法
【发布时间】：2018-01-02 00:14:39
【问题描述】：

我正在使用 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版本有关?) 并且酶无法正确安装（也许又是依赖问题）。所以我想知道的是，测试内部方法的最佳方法是什么。

【问题讨论】：

你能用一个例子更新你的答案吗？
你的问题，对不起。
好的，谢谢，我可以看看App组件的代码吗？谢谢
说实话很简单，它只是一个扩展组件的类，它要么渲染一个Navigator组件，要么是方法needUpdate返回false，如果应用需要更新则返回错误信息。这就是为什么我需要测试 needsUpdate 方法，目前它检查应用程序的版本号是否比参考值更新。

标签： reactjs react-native testing jestjs

【解决方案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，否则我从不将组件包装在模拟提供程序中。

【讨论】：