反应-打字稿-开玩笑-意外令牌,预期为“ {”

时间:2019-12-03 18:23:44

标签: reactjs typescript jestjs enzyme

我使用React / Redux和Typescript在我的项目中添加了笑话+酶。当我测试功能组件时,一切正常,但是在测试类组件时,我出现了的错误。

Unexpected token, expected "{"

class Login extends Component<LoginProps, LoginState> {

经过测试的组件代码-Login.tsx:

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

Login.interface.tsx

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

测试文件-_ 测试 _ / Login.test.tsx:

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

});

tsconfig.json:

{
  "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"
  ]
}

有人遇到过类似的问题,可以给我一些如何解决的建议吗?非常感谢您的帮助。

0 个答案:

没有答案