From 938b18e34e52ccd4eb1d2a79524964f0a8d5d8bb Mon Sep 17 00:00:00 2001 From: du Date: Fri, 23 Jul 2021 18:05:35 +0800 Subject: [PATCH] refactor: transform test/integration/server-rendering => ts --- ...ring.spec.js => server-rendering.spec.tsx} | 63 ++++++++++++++----- 1 file changed, 49 insertions(+), 14 deletions(-) rename test/integration/{server-rendering.spec.js => server-rendering.spec.tsx} (78%) diff --git a/test/integration/server-rendering.spec.js b/test/integration/server-rendering.spec.tsx similarity index 78% rename from test/integration/server-rendering.spec.js rename to test/integration/server-rendering.spec.tsx index 7d92ebf99..7bf3975a5 100644 --- a/test/integration/server-rendering.spec.js +++ b/test/integration/server-rendering.spec.tsx @@ -8,28 +8,64 @@ /*eslint-disable react/prop-types*/ -import React from 'react' +import React, { FunctionComponent } from 'react' import { renderToString } from 'react-dom/server' import { createStore } from 'redux' import { Provider, connect } from '../../src/index' +import type { Dispatch, Store } from 'redux' describe('React', () => { describe('server rendering', () => { - function greetingReducer(state = { greeting: 'Hello' }, action) { + interface ActionType { + type: string + payload: { + greeting: string + } + } + function greetingReducer( + state = { greeting: 'Hello' }, + action: ActionType + ) { return action && action.payload ? action.payload : state } + interface GreetingProps { + greeting: string + greeted: string + } + const Greeting: FunctionComponent = ({ + greeting, + greeted, + }) => { + return {greeting + ' ' + greeted} + } - const Greeting = ({ greeting, greeted }) => greeting + ' ' + greeted - const ConnectedGreeting = connect((state) => state)(Greeting) + interface RootType { + greeting: string + } + interface Props { + greeted: string + } - const Greeter = (props) => ( + const ConnectedGreeting = connect( + (state) => state + )(Greeting) + + const Greeter = (props: any) => (
) - class Dispatcher extends React.Component { - constructor(props) { + interface DispatcherProps { + constructAction?: ActionType + willMountAction?: ActionType + renderAction?: ActionType + dispatch: Dispatch + greeted: string + } + + class Dispatcher extends React.Component { + constructor(props: DispatcherProps) { super(props) if (props.constructAction) { props.dispatch(props.constructAction) @@ -51,23 +87,22 @@ describe('React', () => { const ConnectedDispatcher = connect()(Dispatcher) it('should be able to render connected component with props and state from store', () => { - const store = createStore(greetingReducer) + const store: Store = createStore(greetingReducer) const markup = renderToString( ) - expect(markup).toContain('Hello world') }) it('should run in an SSR environment without logging warnings about useLayoutEffect', () => { - const store = createStore(greetingReducer) + const store: Store = createStore(greetingReducer) const spy = jest.spyOn(console, 'error').mockImplementation(() => {}) - const markup = renderToString( + renderToString( @@ -79,7 +114,7 @@ describe('React', () => { }) it('should render with updated state if actions are dispatched before render', () => { - const store = createStore(greetingReducer) + const store: Store = createStore(greetingReducer) store.dispatch({ type: 'Update', payload: { greeting: 'Hi' } }) @@ -106,7 +141,7 @@ describe('React', () => { In all other versions, including v7, the store state may change as actions are dispatched during lifecycle methods, and components will see that new state immediately as they read it. */ - const store = createStore(greetingReducer) + const store: Store = createStore(greetingReducer) const constructAction = { type: 'Update', payload: { greeting: 'Hi' } } const willMountAction = { type: 'Update', payload: { greeting: 'Hiya' } } @@ -143,7 +178,7 @@ describe('React', () => { This test works both when state is fetched directly in connected components and when it is fetched in a Provider and placed on context */ - const store = createStore(greetingReducer) + const store: Store = createStore(greetingReducer) const constructAction = { type: 'Update', payload: { greeting: 'Hi' } } const willMountAction = { type: 'Update', payload: { greeting: 'Hiya' } }