单元测试：如何测试 redux “Provider”？

Question

我有一个类似下面的函数，这是一个提供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')

    );
}

而EstateList是这样的：

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);

我尝试测试 EstateList，如下所示：

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>
        );
    });
});

但它显示此警告消息：

console.error node_modules/fbjs/lib/warning.js:33 警告：React.createElement：类型无效——需要一个字符串（用于内置组件）或一个类/函数（用于复合 组件）但得到：未定义。您可能忘记导出您的 来自定义它的文件中的组件。

如何解决？

---

我变了

从“../../../components/estates/estateList/estateList”导入{EstateList}；

到

从“../../../components/estates/estateList/estateList”导入EstateList；

然后警告信息消失了。

但似乎类 estateList 仍未运行。 因为当我运行测试时，我没有看到我在 EstateList 的构造函数中添加的 console.log。

顺便说一句，如果我改变了

it('getArticlesFromDatabase ', function () {
    let app = shallow(
        <Provider store={store}>
            <EstateList />
        </Provider>
    );
});

到

it('getArticlesFromDatabase ', function () {
    let app = shallow(
        <Provider store={store}>
            <EstateList />
        </Provider>
    ).dive();
});

然后我将收到以下错误消息：

不变违规：在上下文中找不到“商店”或 “连接（EstateList）”的道具。要么将根组件包装在 , 或明确地将“商店”作为道具传递给 “连接（EstateList）”。

Answer 1

您不必为提供者编写测试，库作者已经为您完成了。

您错误地导入了 EstateList 组件，将其导出为默认值，然后为命名导入执行对象解构导入。

只需import EstateList from 'path'