[英]Create React App , All the test cases are failing because of 1 error
我收到此錯誤-:
永久違反:在“ Connect(登錄)”的上下文或屬性中找不到“存儲”。 將根組件包裝在中,或者顯式傳遞“ store”作為對“ Connect(Login)”的支持
我的Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './fonts/stylesheet.css';
import './index.css';
import Routes from "./routes";
import registerServiceWorker from './registerServiceWorker';
import reducer from './reducers';
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import thunk from 'redux-thunk';
const middleware = [ thunk ]
const store = createStore(
reducer,
applyMiddleware(...middleware)
)
ReactDOM.render(
<Provider store={store}>
<Routes />
</Provider>,
document.getElementById('root')
);
registerServiceWorker();
而Login.js是
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { setLoginStatusAndPartnerName } from '../actions';
import Header from './header';
import Footer from './footer';
class Login extends Component {
constructor() {
super();
this.state = {
emailId: "",
isError: false,
partner: "",
loginStatus: false
};
this.checkEmail = this.checkEmail.bind(this);
this.handleChange = this.handleChange.bind(this);
}
handleChange({ target }) {
this.setState({
[target.name]: target.value,
isError: false
});
}
render() {
return (
<div>
<div className="App">
<Header/>
<div className="login-container">
<form onSubmit={this.checkEmail}>
<div className="email-id">
<label>
Email Address
</label>
<input type="text" value={ this.state.emailId }
onChange={ this.handleChange } name="emailId"/>
</div>
</form>
</div>
</div>
<Footer/>
</div>
);
}
}
function mapStateToProps(state) {
const { loginStatus= false, partner='' } = state;
return{
loginStatus,
partner
}
}
function mapDispatchToProps(dispatch){
return {
sendLoginStatusAndInfo: (loginStatus , partner) => {
dispatch(setLoginStatusAndPartnerName(loginStatus , partner));
}
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Login);
我的login.test.js
import React from 'react';
import ReactDOM from 'react-dom';
import { shallow, mount, render } from 'enzyme';
import Login from '../components/login';
describe('Login Component render', () => {
it('login renders without crashing', () => {
const div = document.createElement('div');
ReactDOM.render(<Login />, div);
});
it('checking whether the login form is present or not', () => {
expect(shallow(<Login />).exists(<form></form>)).toBe(true)
})
it('renders a label of login form', () => {
expect(shallow(<Login />).find('label').length).toEqual(1)
})
it('renders input box of login', () => {
expect(shallow(<Login />).find('input').length).toEqual(1)
})
it('renders the login information text', () => {
expect(shallow(<Login />).find('.login-info-text').length).toEqual(1)
})
});
我不確定自己在做什么錯,但是所有測試用例都因相同的錯誤而失敗。
import { HashRouter, Route, Switch } from 'react-router-dom';
ReactDOM.render((
<Provider store={store}>
<HashRouter history={history}>
<Switch>
<Route path="/" name="Home" component={Full} />
</Switch>
</HashRouter>
</Provider>
), document.getElementById('root'));
這是CoreUi模板中的最佳做法。 您重新設計的路線是否可能不返回組件?
這是因為您嘗試測試已connect
Login
組件,但是您可能應該測試原始組件。 將export
添加到您的組件定義中,如下所示:
export class Login extends Component
而不是導入default( connect
ed),而是將原始組件導入測試:
import {Login} from '../components/login';
這是要閱讀的文檔
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.