Skip to content

Instantly share code, notes, and snippets.

@JamesTheHacker
Last active October 18, 2017 16:00
Show Gist options
  • Save JamesTheHacker/4100db12f444bfe254d2c8e968f44a85 to your computer and use it in GitHub Desktop.
Save JamesTheHacker/4100db12f444bfe254d2c8e968f44a85 to your computer and use it in GitHub Desktop.
Unit testing async action creators
/*
* Actions
*/
export const FETCHING_USER_FROM_API = 'FETCHING_USER_FROM_API';
export const FETCHED_USER_FROM_API = 'FETCHED_USER_FROM_API';
export const FETCHED_USER_ERROR = 'FETCHED_USER_ERROR';
/*
* Action creators
*/
export function fetchingUserFromApi() {
return {
type: FETCHING_USER_FROM_API,
data: {
isLoading: true,
isError: false
}
}
}
export function fetchedUserFromApi(data) {
return {
type: FETCHED_USER_FROM_API,
data: {
isLoading: false,
isError: false,
...data
}
}
}
export function fetchedUserFromApiError() {
return {
type: FETCHED_USER_ERROR,
data: {
isLoading: false,
error: true
}
}
}
/*
* Async actions
*/
export function fetchMe() {
return dispatch =>
fetch(`/me`, { method: 'GET' })
.then(res => res.json())
.then(data => dispatch(fetchedUserFromApi(data)))
};
import {
FETCHING_USER_FROM_API,
FETCHED_USER_FROM_API,
FETCHED_USER_ERROR,
fetchingUserFromApi,
fetchedUserFromApi,
fetchedUserFromApiError,
fetchMe
} from '../actions';
import configureMockStore from 'redux-mock-store';
import thunk from 'redux-thunk';
import fetchMock from 'fetch-mock';
let mockStore;
let store;
beforeEach(() => {
mockStore = configureMockStore([thunk]);
store = mockStore({});
});
describe('actions.test.js', () => {
test('fetchingUserFromApi returns action', () => {
expect(fetchingUserFromApi()).toEqual({
type: FETCHING_USER_FROM_API,
data: {
isLoading: true,
isError: false
}
});
});
test('fetchedUserFromApi returns action', () => {
const data = {
user: {
name: 'test',
level: 0
}
};
expect(fetchedUserFromApi(data)).toEqual({
type: FETCHED_USER_FROM_API,
data: {
isLoading: false,
isError: false,
user: {
name: 'test',
level: 0
}
}
});
});
test('fetchedUserFromApiError returns action', () => {
expect(fetchedUserFromApiError()).toEqual({
type: FETCHED_USER_ERROR,
data: {
isLoading: false,
error: true
}
});
});
test('fetchMe dispatches FETCHED_USER_FROM_API action', () => {
fetchMock.getOnce('/me', {
body: {},
headers: { 'content-type': 'application/json' }
});
const expected = [
{
data: {
isError: false,
isLoading: false
},
type: "FETCHED_USER_FROM_API"
}
];
return store.dispatch(fetchMe()).then(() => {
expect(store.getActions()).toEqual(expected)
});
});
test('FETCHED_USER_FROM_API action has correct data from API', () => {
fetchMock.getOnce('/me', {
body: {
username: 'test',
email: 'test@test.com'
},
headers: { 'content-type': 'application/json' }
});
const expected = [
{
data: {
isError: false,
isLoading: false,
username: 'test',
email: 'test@test.com'
},
type: "FETCHED_USER_FROM_API"
}
];
return store.dispatch(fetchMe()).then(() => {
expect(store.getActions()).toEqual(expected)
});
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment