加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

酶Jest React Redux连接组件在打字稿中

发布时间:2020-12-15 20:30:25 所属栏目:百科 来源:网络整理
导读:背景 在线测试react-redux高阶组件有很多例子,例如:使用connect()反应组件.但是,它们都在ES6中.我了解结构并能够在这些文档或示例的帮助下运行测试. 问题 当我尝试使用JS代码并将其转换为Typescritpt时,我开始遇到类型问题.不确定如何在打字稿中做到这一点
背景
在线测试react-redux高阶组件有很多例子,例如:使用connect()反应组件.但是,它们都在ES6中.我了解结构并能够在这些文档或示例的帮助下运行测试.

问题
当我尝试使用JS代码并将其转换为Typescritpt时,我开始遇到类型问题.不确定如何在打字稿中做到这一点

我试图测试的组件是AspNetCore React-Redux yoman脚手架中的Counter组件

Counter.tsx

import * as React from 'react';
import { Link,RouteComponentProps } from 'react-router-dom';
import { connect } from 'react-redux';
import { ApplicationState }  from '../store';
import * as CounterStore from '../store/Counter';
import * as WeatherForecasts from '../store/WeatherForecasts';

type CounterProps =
     CounterStore.CounterState
     & typeof CounterStore.actionCreators
     & RouteComponentProps<{}>;

export class Counter extends React.Component<CounterProps,{}> {
    public render() {
    return <div>
        <h1>Counter</h1>

        <p>This is a simple example of a React component.</p>

        <p>Current count: <strong>{ this.props.count }</strong></p>

        <button onClick={
        () => { this.props.increment() }
        }>Increment</button>
    </div>;
    }
}

export default connect(
    (state: ApplicationState) => state.counter,CounterStore.actionCreators                 
)(Counter) as typeof Counter;

Counter.spec.js

import { Counter} from '../../ClientApp/components/Counter;
import * as Provider from 'react-redux';
import configureMockStore from 'redux-mock-store';
import * as store from '../../ClientApp/store';
import { shallow,mount } from 'enzyme';

declare var describe,beforeEach,it,expect,state,stub;

describe('Counter',() => {
    let wrapper;

    beforeEach(() => {
        wrapper = shallow(<Provider store={store}>
             <Counter />
        </Provider>
    )
});

    it('render Counter',() => {
    expect(wrapper.length).toEqual(1)
    });
});

错误消息

[ts] JSX element type 'Provider' does not have any construct or call signatures.
[ts] 'React' refers to a UMD global,but the current file is a module. Consider adding an import instead
[ts]
Type '{}' is not assignable to type 'IntrinsicAttributes &  IntrinsicClassAttributes<Login> & Readonly<{ children?: ReactNode; }> & Rea...'.
Type '{}' is not assignable to type 'Readonly<UserProps>'.
    Property 'loggedIn' is missing in type '{}'.

如何摆脱这些错误的消息

解决方法

您忘记在规格文件中导入React:

import * as React from 'react' // -------------------------------> THIS LINE
import { Counter} from '../../ClientApp/components/Counter;
import * as Provider from 'react-redux';
import configureMockStore from 'redux-mock-store';
import * as store from '../../ClientApp/store';
import { shallow,() => {
    expect(wrapper.length).toEqual(1)
    });
});

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读