带道具的玩笑快照

Question

我正在尝试制作此组件的快照：

export default class LoginExternalApi extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    let store = this.props.store.getState();

    return (
      <View style={styles.container}>
        {store.facebookToken ? null : <FacebookButtonConnect />}
        {store.spotifyToken ? null : <SpotifyButtonConnect />}
      </View>
    )
  }
}

正如你所看到的，我在方法中有一个store变量render()，它调用了一个 props。

这是我基于 Jest librairie 的测试文件：

import 'react-native';
import React from 'react';
import LoginExternalApi from '../app/scenes/LoginExternalApi';

import renderer from 'react-test-renderer';

test('LoginExternalApi scene renders correctly', () => {
  const tree = renderer.create(
    <LoginExternalApi />
  ).toJSON();

  expect(tree).toMatchSnapshot();
});

这是我的错误： TypeError: Cannot read property 'getState' of undefined

知道我的测试应该如何编写吗？我应该嘲笑我的商店吗？如何？

Answer 1

这实际上取决于您的商店通常如何作为道具结束在那里，以及您想要如何测试您的组件是否正确呈现。

\n\n

例如，您可以模拟您的商店，然后为每个提供商拍摄一个版本。

\n\n

test(\'LoginExternalApi scene renders Spotify connect button\', () =>\n  let store = {\n    getState() {\n      return { spotifyToken: \'foo\' }\n    }\n  };\n\n  const tree = renderer.create(\n    <LoginExternalApi store={store} />\n  ).toJSON();\n\n  expect(tree).toMatchSnapshot();\n});\n

\n\n

但是，看起来您正在使用 Redux，并且您可能会发现，随着组件的增长，它们需要与商店 API \xe2\x80\x94\n 调度操作的其他部分配合使用。此时，针对真实商店进行测试可能比模拟它更容易。

\n\n

反应还原 API 使得为给定组件获取 store 变得很简单，而不必考虑在每个级别将 store 作为 prop 传递。

\n\n

const tree = renderer.create(\n  <Provider store={store}>\n    <LoginExternalApi />\n  </Provider>\n).toJSON();\n

\n\n

只要您的<LoginExternalApi />组件通过以下方式与商店交互connect，那么您就可以将其包装在显式存储中进行测试。

\n