使用酶测试连接Redux的组件 [英] Testing a Redux-connected component using Enzyme
本文介绍了使用酶测试连接Redux的组件的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
使用酶测试redux连接的组件时遇到问题
have problem with testing redux connected component with enzyme
import React from 'react'
import { shallow, mount, render } from 'enzyme'
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-15';
import Login from '../../src/routes/login/components/Login'
configure({ adapter: new Adapter() })
describe('<Login />', () => {
test('component has form-group nodes', () => {
const component = shallow(<Login />).dive()
expect(component.find('.form-group')).to.have.length(2)
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
但是控制台错误-永久违反:在上下文中或 Connect(登录)的道具中找不到存储。
But have error in console - Invariant Violation: Could not find "store" in either the context or props of "Connect(Login)".
如何处理它? / p>
how to deal with it??
推荐答案
我遇到了类似的问题,并且设法通过使用 redux-mock-store 用于我的商店模拟,我使用mount而不是浅的方法来通过redux到达连接的组件,如下所示:
I faced a similar problem and I managed to solve it by using redux-mock-store for my store mocking and I used mount instead of shallow to reach my connected component with redux like that:
import React, { Component } from 'react';
import { mount } from 'enzyme';
import { expect } from 'chai';
import { Provider } from 'react-redux';
import configureStore from 'redux-mock-store';
import App from '../../src/App';
it('renders without crashing', () => {
const mockStore = configureStore();
const initialState = {
someState: [],
someReducer: {},
};
const store = mockStore(initialState);
const wrapper = mount(
<Provider store={store}>
<App />
</Provider>
);
console.log(wrapper.debug())
expect(wrapper.find('.app-container')).to.have.lengthOf(1);
});
这篇关于使用酶测试连接Redux的组件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文