효소 jest ReactiveRedex Connected in Typecript

효소 jest ReactiveRedex Connected in Typecript

배경 온라인에서 리액션-리벤스 고차 구성 요소를 테스트하는 수많은 예가 있다. 예를 들어, 커넥트를 사용하여 구성 요소를 리액션()한다.하지만 모두 ES6에 있다.나는 구조를 이해하고 이러한 문서나 예제의 도움을 받아 테스트를 실행할 수 있다.

문제 JS 코드를 사용하여 Typecritt로 변환하려고 하면 유형 문제가 발생하기 시작한다.형식 지정에서 이 작업을 수행할 수 있는 방법은 확실하지 않음

테스트하려는 구성 요소는 AspNetCore Resact-Redex 요만 비계에 있는 카운터 구성 요소 tha입니다.

카운터.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;

카운터.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 '{}'.

질문

이러한 오류 메사지를 제거하는 방법

사양 파일에서 리액션을 가져오지 않은 경우:

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

참조URL: https://stackoverflow.com/questions/44981302/enzyme-jest-react-redux-connected-component-in-typescript