I am using #woocommerce/woocommerce-rest-api package for my api. I am using NextJS and React Redux. Here is my woocommerce configuration:
import WooCommerceRestApi from '#woocommerce/woocommerce-rest-api';
export const wooApi = new WooCommerceRestApi({
url: 'MY_API_URL',
consumerKey: 'MY_CONSUMER_KEY',
consumerSecret: 'MY_CONSUMER_SECRET',
version: 'wc/v3',
queryStringAuth: true,
});
I dispatch an action right away when the component mounts.
Here's how I use the API in my action:
export const fetchMainProductCategories = () => {
return async (dispatch: Dispatch) => {
try {
const response = await wooApi.get(`products/categories?hide_empty=true&parent=0`);
dispatch<FetchMainProductCategories>({
type: CategoryTypes.fetchMainProductCategories,
payload: response.data,
});
} catch (error) {
console.log(error);
}
};
};
Here's my initial test statements so far but I doesn't work:
import React from 'react';
import '../../__mocks__/matchMedia';
import MockCategories from '../../__mocks__/mockCategories';
import { render, cleanup, logDOM } from '#testing-library/react';
import Index from '../../pages/index';
import Root from '../../Root';
import { wooApi } from '../../config';
jest.mock('../../config');
describe('Homepage', () => {
beforeEach(() => {
render(
<Root>
<Index />
</Root>
);
});
afterEach(cleanup);
it('loads Product Categories', async () => {
wooApi.get.mockResolvedValueOnce({
data: MockCategories,
});
logDOM();
// const list = await waitFor(() => screen.getByTestId('category-list'));
});
});
You need to register the get method of the wooApi as a mock, while preserving the other features of the api. ie:
import { wooApi } from '../../config'
import { fetchMainProductCategories } from '../where-it-is-defined'
// mark get method as jest mock
jest.mock('../../config', () => ({
...jest.requireActual('../../config'), // to avoid overriding other methods/features
get: jest.fn(), // override get method of the api
}))
describe('Homepage', () => {
beforeEach(()=>{
wooApi.get.mockResolvedValue({
status: 200,
data: { categories: ['a', 'b'] },
})
test('loads ...', async () => {
const dispatch = jest.fn()
await fetchMainProductCategories()(dispatch)
expect(dispatch).toHaveBeenCalledWith(
{ type: '...',
payload: { categories: ['a', 'b'] }
}
)
})
})
Ref:
Bypassing Module Mocks in Jest
Edited: My bad, by doing jest.spyOn(config.wooApi, 'get') we are only mocking "get" method of a single instance. The following edited code should work
You can also use jest.spyOn to only mock the get method like below
import * as config from '../../config'
jest.spyOn(WooCommerceRestApi.prototype, 'get')
WooCommerceRestApi.prototype.get.mockResolvedValue('...')
Related
I have written render tests for component. I have used action in useEffect that is calling api by triggering saga.
Tests are giving positive result but I am getting following fetch error in from try catch block of saga(calling api)
FetchError {
message: 'invalid json response body at reason: Unexpected end of JSON input',
type: 'invalid-json'
}
What should i do to remove this warning?
My component's useEffect code
const FileUploadContainer = ({
....// some props
}: Props) => {
useEffect(() => {
// action method that calling api by saga
loadOrgUnitClientFiles({
entity: 'xyzzzzz',
query: 'fooooo'
})
}, [loadOrgUnitClientFiles])
return (
<Page title={title}>
.....
</Page>
)
}
export default connect(
(state: RootState) => {
return {
...//mapStateToProps obj
}
},
{
uploadClientFile,
loadOrgUnitClientFiles
}
)(FileUploadContainer)
And the test file is
import React from 'react'
import { render, screen } from 'test-utils/customRenderer'
import FileUploadContainer from './FileUploadContainer'
import { fromJS } from 'immutable'
import SessionRecord from 'shared/reducers/sessionReducer/SessionRecord'
const initialState = fromJS({
...//mock obj
})
describe('FileUploadContainer', () => {
it('renders correctly', () => {
render(<FileUploadContainer />, {
state: initialState
})
expect(screen.getByText('Upload a file for TealBook')).toBeInTheDocument()
expect(screen.getByText('file1.xlsx')).toBeInTheDocument()
})
})
I have the following axios file:
/* eslint-disable no-param-reassign */
import axios from 'axios';
import { baseURL } from './apiClient';
export default function authenticatedApiClient(jwt: string) {
const apiClient = axios.create({
baseURL,
});
apiClient.interceptors.request.use((config) => {
config.headers = config.headers || {};
config.headers.Authorization = `Bearer ${jwt}`;
return config;
});
return apiClient;
}
And the following test:
import React from 'react';
import {
act, render, screen,
} from '#testing-library/react';
import mockAxios from 'jest-mock-axios';
import { BrowserRouter } from 'react-router-dom';
import { AppProvider } from '../common/AppProvider';
import DisplayEditProfileForm from '.';
test('should render edit user profile form', async () => {
const user = {
username: 'admin',
email: 'ad#ad.com',
};
act(() => {
mockAxios.get.mockResolvedValueOnce({ data: user });
});
render(
<BrowserRouter>
<AppProvider>
<DisplayEditProfileForm />
</AppProvider>
</BrowserRouter>,
);
const usernameInputLabel = screen.getByText(/Username/i);
expect(usernameInputLabel).toBeInTheDocument();
const emailInputLabel = screen.getByText(/Email/i);
expect(emailInputLabel).toBeInTheDocument();
const passwordConfirmationInputLabel = screen.getByText(/Password confirmation/i);
expect(passwordConfirmationInputLabel).toBeInTheDocument();
});
We have recently implemented the interceptors, and now my tests throw the following error:
TypeError: Cannot read properties of undefined (reading 'get')
So how can i mock the interceptors? Could someone provide me with a example?
I have also tried this approach with the same results:
act(() => {
jest.mock('axios', () => ({
create: jest.fn(() => ({
get: jest.fn(),
interceptors: {
request: { use: jest.fn(), eject: jest.fn() },
response: { use: jest.fn(), eject: jest.fn() },
},
})),
}));
const mockedAxios = axios as jest.Mocked<typeof axios>;
mockedAxios.get.mockResolvedValueOnce({ data: [{ user }] });
});
Axios is a singleton, meaning that you have a single instance wherever you import it.
It means that if we include it in our tests, it will be the same instance as in the code you are trying to test.
So if you'd import axios in your test code:
import axios from 'axios';
You would have a single axios instance in your component and tests. And you would be able to do anything with it, mocking and stubbing included.
You could mock it with jest with:
jest.mock("axios");
I found a bit of more info on mocking axios with jest here.
I am using jest and enzyme for Unit Testing of a React App created using create-react-app. I have an axios call and I call other functions like myfunction.onSuccess() and myfunction.onError() from another component on success and error of the axios call respectively. I have put an assert to expect(myfunction.onSuccess).toHaveBeenCalledTimes(1); This works fine for mockResolvedValue but not for mockRejectedValue. I see that async-await is not respected for mockRejectedValue.
I have created a sample code and used window.alert as the function to be called in both then and catch block to keep it simple here and expecting this function to be called once as an assert. Why is there a difference and how to tackle this?
Async.js
import React from 'react';
import axios from 'axios';
class Async extends React.Component {
constructor(props) {
super(props);
this.state = {
posts: []
};
}
getAllPosts() {
axios.get(`https://jsonplaceholder.typicode.com/posts`)
.then(response => {
if (response.data) {
this.setState({ posts: response.data });
window.alert("Data fetch Success");
}
}).catch(error => {
window.alert(error.message);
});
}
render() {
return (
<div>
<button onClick={() => { this.getAllPosts() }}>Fetch Posts</button>
<ul>
{this.state.posts.map((post) => (
<li key={post.id}>{post.title}</li>
))}
</ul>
</div>
);
}
}
export default Async;
Async.test.js
import React from 'react';
import Async from './Async';
import { shallow } from 'enzyme';
import axios from "axios";
jest.mock("axios");
describe('Async Component', () => {
const wrapper = shallow(<Async />);
const layout = wrapper.instance();
it('to notify success when posts', async () => {
window.alert = jest.fn();
const response = { data: [{ id: '1', title: 'something' }, { id: '2', title: 'something else' }] };
axios.get.mockResolvedValue(response);
await layout.getAllPosts();
expect(layout.state.posts).not.toBe([])
expect(window.alert).toHaveBeenCalledTimes(1);
});
it('to notify failure when error is encountered', async () => {
window.alert = jest.fn();
const error = { message: '500 Internal Server Error' };
axios.get.mockRejectedValue(error);
await layout.getAllPosts();
expect(window.alert).toHaveBeenCalledTimes(1); // why doesn't this work?
});
});
I am trying to use Jest for unit testing. Part of the testing is to mock Axios, but for some reason it is not being called.
Here is my /__mocks__/axios.js code:
export default {
post: jest.fn(() => Promise.resolve({})),
};
Here is my test code:
import mockAxios from 'axios';
import { registerUser } from '../../actions/auth';
import user from '../fixtures/user';
describe('Register User', () => {
test('Should call register API and redirect to login', async () => {
const historyMock = { push: jest.fn() };
mockAxios.post.mockImplementationOnce(() => Promise.resolve());
await registerUser(user, historyMock);
expect(mockAxios.post).toHaveBeenCalledTimes(1);
});
});
Also here is the registerUser code:
export const registerUser = (user, history) => dispatch => axios
.post('/users/register', user)
.then(() => history.push('/login'))
.catch((err) => {
dispatch(handleError(err));
});
But for some reason I continue to get the error:
Register User › Should call register API and redirect to login
expect(jest.fn()).toHaveBeenCalledTimes(1)
Expected mock function to have been called one time, but it was called zero times.
35 | await registerUser(user, historyMock);
36 |
> 37 | expect(mockAxios.post).toHaveBeenCalledTimes(1);
Any ideas why the mock is not working?
As #jonrsharpe pointed out in the comments, the registerUser function was returning the function:
dispatch => axios
.post('/users/register', user)
.then(() => history.push('/login'))
.catch((err) => {
dispatch(handleError(err));
});
So in order for this to work, I had to had to mock the store using the redux-mock-store npm module. The new test code looks like:
import mockAxios from 'axios';
import configureMockStore from 'redux-mock-store';
import thunk from 'redux-thunk';
import { setCurrentUser, registerUser } from '../../actions/auth';
import user from '../fixtures/user';
const defaultStoreState = { errors: {}, auth: { isAuthenticated: false, user: {} } };
const createMockStore = configureMockStore([thunk]);
describe('Register User', () => {
test('Should call register API and redirect to login', (done) => {
const mockStore = createMockStore(defaultStoreState);
const historyMock = { push: jest.fn() };
mockStore.dispatch(registerUser(user, historyMock)).then(() => {
expect(mockAxios.post).toHaveBeenCalledTimes(1);
expect(historyMock.push).toHaveBeenCalledTimes(1);
expect(historyMock.push).toHaveBeenCalledWith('/login');
done();
});
});
});
This gives a passing test now.
I don't think you're setting the mock correctly.
mockAxios.post.mockImplementationOnce
should be changed to
mockAxios.post = jest.fn().mockResolvedValueOnce('bloofblurg');
Then you can double-check that post has been called once and resolved the expected value.
expect(mockAxios.post).resolves.toBe('bloofblurg');
see
https://jestjs.io/docs/en/mock-function-api#mockfnmockresolvedvalueoncevalue
https://jestjs.io/docs/en/expect#resolves
I follow the basic exmaple of redux.org to test async action
action.js
my code is like this:
import axios from 'axios'
export function getGoodDataStart(){
return{
type: "GOOD_DATA_START"
}
}
export function getGoodDataSuccess(payload){
console.log('success', payload)
return {
type: "GOOD_DATA_SUCCESS",
payload: payload
}
}
export function getGoodDataFail(){
return{
type: "GOOD_DATA_FAIL"
}
}
export function getGoodData(){
return (dispatch) => {
dispatch( getGoodDataStart() )
return axios.get('http://www.google.com/list')
.then( response => {
console.log('fake res',response)
dispatch(getGoodDataSuccess (response) )
})
.catch( err => {
console.log('fake err',err)
})
}
}
test.js
import nock from 'nock'
import React from 'react'
import {expect} from 'chai'
import {getGoodData} from 'registerAction'
import configureMockStore from 'redux-mock-store'
import thunk from 'redux-thunk'
const middlewares = [ thunk ]
const mockStore = configureMockStore(middlewares)
describe('Register component', () => {
it('async action', function () {
nock('http://www.google.com')
.get('/list')
.reply(200,'ok!' )
const store = mockStore({
myData: '' ,
})
const expected = [
{type: "GOOD_DATA_START"},
{type: "GOOD_DATA_SUCCESS", payload: 'ok!'}
]
return store.dispatch(getGoodData())
.then( () => {
expect(store.getActions()).to.equal(expected)
})
})
})
The problem I have is, nock is not blocking the request, it lets function getGoodData make real request to google.com. What am I doing wrong?
screen shot of the error:
Here is the demo: https://github.com/craigcosmo/react-redux-test
install: npm i
to test: npm run test
open url: http://localhost:5051/webpack-dev-server/
Typically when testing an action like this you'll want to remove anything that is not part of your action from the equation. In this case by simply using nock, you're not removing axios from the equation and are actually adding unnecessary complexity. By mocking axios with a spy, you avoid making the network call and you also avoid calling axios at all. This allows you to simply assert that axios is called with the correct parameters. The spy can return a promise that allows testing all the promise handling and subsequent action calls. In order to demonstrate this, I needed to add a library that provides spies, so I opted to add 'expect' for both assertions and spies, but you could easily do the same thing with sinon if you want to stick with chai.
Here's an example where you don't need nock at all and you just mock axios with a spy:
import React from 'react'
import * as registerAction from 'registerAction'
import configureMockStore from 'redux-mock-store'
import thunk from 'redux-thunk'
import expect from 'expect'
const middlewares = [ thunk ]
const mockStore = configureMockStore(middlewares)
// set up to mock axios methods
import axios from 'axios'
const _get = axios.get
const fakePayload = { foo: 'bar' };
describe('Register component', () => {
beforeEach(() => {
// replace the .get method temporarily with a spy
axios.get = expect.createSpy().andReturn(Promise.resolve(fakePayload));
})
afterEach(() => {
// restore the get method with our saved const
axios.get = _get;
})
it('async action', function () {
const store = mockStore({
myData: '' ,
})
const expected = [
{type: "GOOD_DATA_START"},
{type: "GOOD_DATA_SUCCESS", payload: fakePayload}
]
return store.dispatch(registerAction.getGoodData())
.then( () => {
expect(store.getActions()).toEqual(expected)
expect(axios.get).toHaveBeenCalled()
expect(axios.get).toHaveBeenCalledWith('http://www.google.com/list')
})
})
})
read https://github.com/node-nock/nock/issues/150
Your tests are doing great on console-
add this two script run on your package.json
"itest": "mocha --compilers js:babel-register -R spec \"test/*.test.js\"",
"itest:watch": "npm run itest -- --watch"
You might need something like this
beforeEach(() => {
nock.disableNetConnect();
});
afterEach(() => {
nock.cleanAll();
nock.enableNetConnect();
});
Enable/Disable real HTTP Request