在react-redux连接组件中执行单元测试时出错

Question

我正在尝试用jest-enzyme测试连接的组件(react-redux)。我正在使用react-redux-mock store。当我运行我的测试来查找组件中的一个div时，它给出了这个错误。

Invariant Violation: Passing redux store in props has been removed and does not do anything. To use a custom Redux store for specific components, create a custom React context with React.createContext(), and pass the context object to React-Redux's Provider and specific components like: <Provider context={MyContext}><ConnectedComponent context={MyContext} /></Provider>. You may also pass a {context : MyContext} option to connect

我只是挂载和测试了组件，没有重复，它可以工作，但我想做一个>浅层的测试。

describe("Input Component", () => {
let wrapper;
let store;
beforeEach(() => {
    store = mockStore(initialState);

    wrapper = shallow(<Input store={store} />);
});

it("should rendder without error", () => {
    expect(wrapper.find("div")).toHaveLength(1);
});
});

Answer 1

如何导入组件？

例如，如果你用import App from './yourpath/ App‘导入它，你实际上持有的是connect()返回的包装器组件，而不是App组件本身。

为了能够在不处理装饰器的情况下测试App组件本身，还必须导出未修饰的组件：

import { connect } from 'react-redux'

// Use named export for unconnected component (for tests)
export class App extends Component {
/* ... */
}

// Use default export for the connected component (for app)
export default connect(mapStateToProps)(App)

并将其导入到您的测试文件中，如下所示：

import { App } from './yourpath/App'