Unit test: how to test redux "Provider"? - reactjs

Question

I have a function like following, this is a rudux to provide EstateList.
import {render} from "react-dom";
import React from "react";
import {Provider} from "react-redux";
import store from "./Store";
import EstateList from "../estates/estateList/estateList";
function estateList() {
render(
<Provider store={store}>
<EstateList />
</Provider>,
window.document.getElementById('estateList')
);
}
And EstateList is like this:
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import {connect} from "react-redux";
class EstateList extends Component {
constructor(){
...
console.log('this can not be seen');
}
render() {...}
}
const mapStateToProps = (state) => {
return {
title: state.subNavReducer.title
};
};
const mapDispatchToProps = (dispatch) => {
return {
setSubNav: (title) => {
dispatch({
type: "SET_TITLE",
payload: title
});
}
};
};
export default connect(mapStateToProps, mapDispatchToProps)(EstateList);
I tried to test EstateList, like following:
import {shallow, configure} from 'enzyme';
import Adapter from 'enzyme-adapter-react-15';
import {expect} from 'chai';
import {Provider} from "react-redux";
import store from "../../../components/store/Store";
import EstateList from "../../../components/estates/estateList/estateList";
//import {EstateList} from "../../../components/estates/estateList/estateList";
describe('estate', function () {
it('getArticlesFromDatabase ', function () {
let app = shallow(
<Provider store={store}>
<EstateList />
</Provider>
);
});
});
But it shows this warning message:
console.error node_modules/fbjs/lib/warning.js:33
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite
components) but got: undefined. You likely forgot to export your
component from the file it's defined in.
How to fix it?
I had changed
import {EstateList} from "../../../components/estates/estateList/estateList";
to
import EstateList from "../../../components/estates/estateList/estateList";
Then the warning message gone.
But seems like class estateList still not be runed.
Cause when I run the test, I haven't seen the console.log which I add inside estateList's constructor.
By the way, If I changed
it('getArticlesFromDatabase ', function () {
let app = shallow(
<Provider store={store}>
<EstateList />
</Provider>
);
});
to
it('getArticlesFromDatabase ', function () {
let app = shallow(
<Provider store={store}>
<EstateList />
</Provider>
).dive();
});
then I will get following error message:
Invariant Violation: Could not find "store" in either the context or
props of "Connect(EstateList)". Either wrap the root component in a
, or explicitly pass "store" as a prop to
"Connect(EstateList)".

Answer 1

you shouldn't have to write a test for provider, the libary authors have already done that for you.
You are importing your EstateList component wrong, you export default'd it, and then are doing a object destructure import for named imports.
just import EstateList from 'path'