带道具的Jest快照

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()变量，它可以调用道具。

这是我基于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

这实际上取决于您的商店通常如何作为道具结束，以及您希望如何测试您的组件正确呈现。

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

test('LoginExternalApi scene renders Spotify connect button', () =>
  let store = {
    getState() {
      return { spotifyToken: 'foo' }
    }
  };

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

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

但是，看起来您正在使用Redux，并且您可能会发现随着组件的增长，它们需要与商店API的其他部分一起工作 - 例如，调度操作。在这一点上，对真实商店进行测试可能更容易，而不是嘲笑它。

react-redux API使得为您的商店获取给定组件变得微不足道，而不必考虑将商店作为每个级别的道具传递。

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

只要您的<LoginExternalApi />组件通过connect函数与商店连接，您就可以将其包装在显式商店中进行测试。