react-native - 如何测试由 ComponentDidMount 中的操作创建者触发的商店更新

Question

我正在尝试测试从 bing API 获取图像以设置为背景图像的连接组件ComponentDidMount。测试很简单，我使用 Enzyme 渲染组件 redux-mock-store 来模拟我的 redux 存储。期望应该只检查ImageBackground组件的源 prop 的 uri 键的值是否正确设置。这是组件的外观（我删除了大部分不相关的代码）：

class LoginForm extends Component {
  componentDidMount(){
    this.props.fetchImageOfTheDay()
  }
  render() {
    if (this.props.loading) {
      return <Spinner size="large" />;
    }
    else {
      return (
        <ImageBackground style={styles.containerStyle} source={{uri: this.props.backgroundImage ? this.props.backgroundImage : ""}}>
        </ImageBackground>
      )
    }
  }
}

const mapStateToProps = (state, ownProps) => {
  const { username, password } = state.authentication;
  const {error, loading, backgroundImage} = state
  return { username, password, error, loading, backgroundImage };
};

export default connect(mapStateToProps, { loginUser, authUpdate, fetchImageOfTheDay })(LoginForm);

当天的 fetchImage 负责获取图像并更新 store 上的 backgroundImage ：

export const fetchImageOfTheDay = () =>{
  return (dispatch) => {
    axios.get('http://www.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1')
      .then(response => fetchImageOfTheDaySuccess(dispatch, response))
      .catch(error => console.log(error));
    };
}
const fetchImageOfTheDaySuccess = (dispatch, data) => {
  console.log("DATA", data.data.images[0].url)
  dispatch({
    type: SET_BACKGROUND_IMAGE,
    payload: data.data.images[0].url
  })
}

这是我的测试，每次我检查 uri 时，我都会得到一个“”，而不是我使用 moxios 模拟的预期数据（模拟实际上就像 console.log("DATA", data.data.images[0].url)实际打印它应该在其中一样工作fetchImageOfTheDaySuccess。

let store
const setup = (initialState = {}) => {
  store = makeMockStore(initialState);
  const wrapper = shallow(
    <Provider store={store}>
      <LoginForm/>
    </Provider>).dive()
  return wrapper
}
let initialState
beforeEach(() => {
  initialState = { error: false, loading: false, authentication: { username: "", password: ""}, backgroundImage: null}
})
test('it fetches and displays an ImageBackground', (done) => {
  moxios.install()
  moxios.stubRequest('http://www.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1', {
    status: 200,
    response: getImageOftheDayMock
  })

  wrapper = setup(initialState).dive()

  moxios.wait(()=>{
    wrapper.update()
    console.log(store.getState())
    console.log(wrapper.find(ImageBackground).prop('source').uri)
    expect(wrapper.find(ImageBackground).prop('source').uri).toBe('/th?id=OHR.RedRocksArches_EN-GB2044389872_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp')
    done()
    moxios.uninstall()
  })
})

这是 makeMockStore ：

import configureStore from 'redux-mock-store'
import thunk from 'redux-thunk'

const middlewares = [thunk] // add your middlewares like `redux-thunk`
const mockStore = configureStore(middlewares)
export const makeMockStore = (state = {}) => {
  return mockStore({
    ...state
  })
}

即使我打电话，商店似乎也永远不会更新wrapper.update()。我在这里做错了什么？

标签： react-nativereact-reduxjestjsintegration-testingenzyme