Как проверить обновление магазина, созданное создателем действия в ComponentDidMount - PullRequest
Новая
       90

Как проверить обновление магазина, созданное создателем действия в ComponentDidMount

0 голосов
/ 11 октября 2019

Я пытаюсь проверить подключенный компонент, который выбирает изображение из API-интерфейса bing, чтобы установить его в качестве фонового изображения на ComponentDidMount. Тест довольно прост, я использую Enzyme для рендеринга компонента redux-mock-store, чтобы издеваться над моим избыточным хранилищем. Ожидание следует просто проверить, правильно ли установлено значение ключа uri исходного пропеллера компонента ImageBackground. Вот как выглядит компонент (я удалил большую часть кода, не относящегося к событию): 

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 дня отвечает за получение изображения и обновление 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 (mockios на самом деле работает так, как 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(). Что я здесь не так делаю?

...