我使用React / Redux和Typescript在我的项目中添加了笑话+酶。当我测试功能组件时,一切正常,但是在测试类组件时,我出现了 经过测试的组件代码-Login.tsx: Login.interface.tsx 测试文件-_ 测试 _ / Login.test.tsx: tsconfig.json: 有人遇到过类似的问题,可以给我一些如何解决的建议吗?非常感谢您的帮助。Unexpected token, expected "{"
class Login extends Component<LoginProps, LoginState> {
import React, { Component } from "react";
import { LoginProps, LoginState } from "./Login.interface";
import LoginView from "./Login.view";
import { connect } from "react-redux";
import { loginUser } from "./../../../actions/userActions";
import { store } from "./../../../store";
import { Redirect } from "react-router-dom";
class Login extends Component<LoginProps, LoginState> {
constructor(props: LoginProps) {
super(props);
this.state = {
email: "",
password: "",
redirectToFilledInfo: false,
redirectToEvents: false
};
}
handleChange = (event: { target: any }) => {
const { name, value } = event.target;
// @ts-ignore
this.setState({ [name]: value });
};
handleSubmit = () => {
const userCredentials = {
email: this.state.email,
password: this.state.password
};
//redux action as props
this.props.handleLogin(userCredentials);
};
componentDidMount = async () => {
store.subscribe(() => {
let storeData: any;
storeData = store.getState();
if (storeData.userData.user.filled_info === 0) {
this.setState({ redirectToFilledInfo: true });
} else if (storeData.userData.user.filled_info === 1) {
this.setState({ redirectToEvents: true });
}
});
};
render() {
const { redirectToFilledInfo, redirectToEvents } = this.state;
if (redirectToFilledInfo) {
return <Redirect to="/update-profile" />;
}
if (redirectToEvents) {
return <Redirect to="/events" />;
}
return (
<LoginView
handleChange={this.handleChange}
handleSubmit={this.handleSubmit}
/>
);
}
}
const mapStateToProps = state => ({
userData: state.userData
});
const mapDispatchToProps = dispatch => ({
handleLogin(userCredentials) {
dispatch(loginUser(userCredentials));
}
});
export default connect(
mapStateToProps,
mapDispatchToProps
)(Login);
interface LoginProps {
handleLogin: (userCredentials: { email: string; password: string }) => {};
userData: {
user: {
id: number;
nick: string;
email: string;
token: string;
};
};
}
interface LoginState {
email: string;
password: string;
redirectToFilledInfo: boolean;
redirectToEvents: boolean;
}
export { LoginProps, LoginState };
import React from "react";
import ReactDOM from "react-dom";
import Login from "./../Login/Login";
import { mount, configure } from "enzyme";
import Adapter from "enzyme-adapter-react-16";
import configureMockStore from "redux-mock-store";
import { Provider } from "react-redux";
const mockStore = configureMockStore();
const store = mockStore({
userData: {
user: {
id: 1,
nick: "test",
email: "test@test.com",
filled_info: 1,
country: "poland",
age: 22,
description: "desc",
token: "test"
}
}
});
configure({ adapter: new Adapter() });
let wrapper;
beforeEach(() => {
wrapper = mount(
<Provider store={store}>
<Login />
</Provider>
);
});
describe("<Login /> rendering", () => {
it("render correctly", () => {
expect(wrapper).toMatchSnapshot();
});
});
{
"compilerOptions": {
"sourceMap": true,
"target": "es5",
"jsx": "react",
"module": "es6",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"declaration": false,
"noEmit": false,
"noUnusedLocals": false,
"noImplicitAny": false,
"noImplicitReturns": false,
"allowSyntheticDefaultImports": true,
"removeComments": true,
"strictNullChecks": false,
"outDir": "build",
"lib": ["es6", "es7", "dom"],
"rootDir": "./resources/assets/js",
"baseUrl": "./resources/assets/js"
},
"exclude": [
"public",
"dist",
"build",
"node_modules",
"vendor",
"scripts",
"acceptance-tests",
"webpack",
"jest",
"resources/assets/js/utils/setupTests.ts"
]
}