Sending (action) does not immediately update the state of reduction in unit tests

Question

I am writing test cases for my application and response databases.

container = TestUtils.renderIntoDocument(
  <Provider store={createStore({"key": "old_val"})}>
    {() => <Component />}
  </Provider>
);

After rendering with initialState, I submit the action and see if the state changes.

Component.store.dispatch({ type: 'SET_VAL', value: 'some_val' });

Then i print the state

console.log(store.getState());

I expect the condition to be {"key": "some_val"}. However, he still shows {"key": "old_val"}.

The app works fine, just not a test, so no problems with my action-creatorsor reducersmay not be.

Am I doing something wrong here? By the way, I use thunkmiddleware to send an asynchronous action. Does it bother here? If so, how can I wait for the asynchronous action to complete?

Update:

redux , , , , .

store.dispatch(addTodo('Hello'));
expect(store.getState()).toEqual([{
  id: 1,
  text: 'Hello'
}]);

Answer 1

, , . Redux react-redux , . , , , .

, key KeyDisplay. :

reducers.js

import { combineReducers } from 'redux';

export function key(state, { type, value }) {
  switch(type) {
    case 'SET_VAL': return value;
    default: return state;
  }
}

export default combineReducers({ key });

:

KeyDisplay.js

import React from 'react';
import { connect } from 'react-redux';

export function KeyDisplay({ keyProp }) {
  return (
    <div>The key is {keyProp}</div>
  );
}

export default connect((state) => { keyProp: state.key })(KeyDisplay);

unit test key :

keyReducer.test.js

import test from 'tape';
import { key } from './reducers.js';

test('key reducer', (t) => {
  t.plan(1);
  const output = key('old', { type: 'SET_VAL', value: 'new' });
  t.equal(output, 'new', 'SET_VAL should override old value');
});

, connect , un connect ed , , :

KeyDisplay.test.js

import test from 'tape';
import { renderIntoDocument } from 'react-addons-test-utils';
import { KeyDisplay } from './KeyDisplay.js';

test('KeyDisplay', (t) => {
  const component = renderIntoDocument(<KeyDisplay keyProp="test" />);
  // test component
});