We Keep Coding

React app Jest unit test failing with Microsoft application insights react plugin

I'm trying to use the Microsoft's Application Insights JavaScript SDK React Plugin in my React application, and although it's working successfully, I'm having trouble getting my Jest and Enzyme unit test to pass with it.
I've set up my unit test like the following:
import React from 'react';
import {act} from 'react-dom/test-utils';
import ReactDOM from 'react-dom';
import App from '../App.view';
jest.mock('#microsoft/applicationinsights-react-js', () => ({
ReactPlugin: Object,
}));
jest.mock('#microsoft/applicationinsights-web', () => ({
ApplicationInsights: Object,
loadAppInsights: () => ({}),
}));
describe('App View', () => {
it('renders without crashing', () => {
const div = document.createElement('div');
act(() => {
ReactDOM.render(<App />, div);
});
ReactDOM.unmountComponentAtNode(div);
});
});
With my application insights service as:
import {ApplicationInsights} from '#microsoft/applicationinsights-web';
import {ReactPlugin, withAITracking} from '#microsoft/applicationinsights-react-js';
import {createBrowserHistory} from 'history';
// Set up AppInsights connection
const browserHistory = createBrowserHistory({basename: ''});
const reactPlugin = new ReactPlugin();
const ai = new ApplicationInsights({
config: {
instrumentationKey:
process.env.REACT_APP_APPINSIGHTS_KEY || 'xxxxxxxxxxx-xxxxxxxxxx-xxxxxxx-xxxxx',
extensions: [reactPlugin],
extensionConfig: {
[reactPlugin.identifier]: {history: browserHistory},
},
},
});
ai.loadAppInsights();
export default Component => withAITracking(reactPlugin, Component);
export const appInsights = ai.appInsights;
When I run my tests, I keep getting the error, TypeError: ai.loadAppInsights is not a function
Since I'm using jest mocking for the application insights modules, I've tried to mock this method as well in several ways, but with no luck. Any ideas on what I'm missing here? I'm also unable to find any good documentation on how to properly integrate application insights into a React application, which includes proper unit testing.
Thanks in advance!

Vue-test-utils wrapper undefined

I have the following test suite in Jest for a component. I have successfully written unit tests for several other components that follow a similar structure:
import { createLocalVue, mount } from '#vue/test-utils'
import Vuex from 'vuex'
import storeMock from '#mocks/store'
import RequestProposalsContainer from '#/components/RequestProposals/RequestProposalsContainer'
describe('ProviderComparison component', () => {
let localVue, store, wrapper, storeSetup
beforeEach(() => {
localVue = createLocalVue()
localVue.use(Vuex)
storeSetup = storeMock()
store = new Vuex.Store(storeSetup)
/* wrapper is undefined and I'm not sure why */
wrapper = mount(RequestProposalsContainer, {
localVue,
store
})
})
it('renders correct structure', () => {
/* undefined */
console.log('wrapper: ', wrapper)
})
})
By inspection, the component being mounted, the store, and localVue instance are well-defined.

I was in a similar situation where the wrapper would come back undefined.
While testing, you have to give the component everything it needs to render.
It was (as #Adam Freymiller has already alluded to) that all the required values (props, store values, etc) were not set in the test, so the component would error out, much like how it would in a real life scenario.

How can I test areStatesEqual in a redux connected component

I have a redux connected component that is utilising areStatesEqual in the options argument in the redux connect api to avoid re-rendering.
shouldComponentUpdate does the same job, but a lot slower in my use case.
I'm struggling to test multiple state updates, asserting that under certain conditions this component believes the states are equal, and shouldn't re-render.
I'm using react-mock-store for other components, but that only deals with static state, not dynamic. Also using mocha & enzyme elsewhere too.
Does anyone have any ideas how I can test this behaviour?
(This is a simplified version of a more complicated component)
import { connect } from 'react-redux';
import { compose } from 'redux';
import MyComponent from './my-component';
const mapStateToProps = (state, props) => ({
text: state.a.text[props.id],
});
const areStatesEqual = (next, prev) => {
return next.a === prev.a;
};
const options = { areStatesEqual };
export default connect(mapStateToProps, undefined, undefined, options)(MyComponent);
MyComponent is a simple functional component that just accepts props and renders:
export default function Label({ text }) {
return <p>{text}</p>;
}

In the end I managed to test the logic by exporting the areStatesEqual function and doing a simple test.
export const areStatesEqual = (next, prev) => {
return next.a === prev.a;
};
I haven't figured out a way to test the flow of the lifecycle of a component

Jest mock redux-store getState() used in module with redux-mock-store

So my implementation of the redux-store might not be the best and my knowledge of Jest is minimum-to-none..
I have three files which consists of...
A module
A React Component
The (a normal) store, exported as default
My test file looks like this:
// file.test.js
jest.mock( 'store', () => jest.fn() )
// external
import React from 'react'
import configureStore from 'redux-mock-store'
// internal
import Component from 'components/Component'
import store from 'store'
describe( 'Test My Component', () => {
const mockStore = configureStore()
it ( 'should equal true', () => {
const initialState = { active: true }
store.mockImplementation(() => mockStore( initialState ))
expect( store.getState().active ).toBe( true )
} )
} );
The reason why I am mocking store is because inside <Component /> I am using a module which itself imports the same store and holds a few function that are making use of store.getState()...
So what this returns is
TypeError: _store2.default.getState is not a function
I did get around this by mocking the module call (which is used by the <Component />) instead, but I feel like I "should" be able to do this, as I have different initial states I want to try and not all are dependent on the module.
This is my very first post on SO, let me know If I should clarify anything!

Do not import the store. We want to mock the store:
const store = mockStore(initialState);

How would I unit test this utility that connects Redux to React components?

I have a "utility" called "reduxify" that automatically does a lot of the Redux/React boilerplate for you, so that instead of writing "mapStateToProps" and "mapDispatchToProps" functions on every component, you just write your component like this:
// usage.
class Foo extends Component {
// component stuff
}
export default reduxify(actions, Foo);
The reduxify function (with comments) are at this gist:
https://gist.github.com/brianboyko/904d87da2a75c98e8cd5f5352dd69d57
Without the comments (for brevity), it's produced below:
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { getStore } from '../store/storeConfig'
export function reduxify(actions, component){
let mapStateToProps = (state) => {
state = Object.assign({}, state, {store: state}, {getStore: getStore});
return (state);
}
let prepareActions = (actions) => (dispatch) =>
({ actions: bindActionCreators(actions.default, dispatch),
dispatch: dispatch,
})
let mapDispatchToProps = (dispatch) => (prepareActions(actions, dispatch))
return connect(mapStateToProps, mapDispatchToProps)(component);
}
So, here's the question: What's the best way to mock a component (one that will have access to the Provider) so that I can unit test this sucker, put it out there for people to use and enjoy, and not feel like a hack?

Have a look at the unit tests used by react-redux for an example of how to test a component that is wrapped by <Provider>: https://github.com/reactjs/react-redux/blob/master/test/components/Provider.spec.js#L50-64. Basically, they just declared a component and then wrapped it with a <Provider> component whose store prop is a mocked Redux store. (They're using 'react-addons-test-utils' to do their test component rendering, but it would be even easier with enzyme.)
In your case, you could spy on the mocked store's dispatch() method to ensure that your component's action-dispatching props are calling it as expected.