[next] added the same tests in core next package

This commit is contained in:
Resi Respati
2019-02-18 21:25:52 +07:00
parent 049d5a8168
commit 02ba783ed3
5 changed files with 46 additions and 10 deletions

View File

@@ -35,6 +35,6 @@
"test/next-server-dynamic-tests.tsx",
"test/next-server-router-tests.tsx",
"test/imports/no-default.tsx",
"test/imports/with-default.tsx",
"test/imports/with-default.tsx"
]
}

View File

@@ -0,0 +1,7 @@
import * as React from "react";
interface Props {
foo: string;
}
export const MyComponent: React.SFC<Props> = ({ foo: text }) => <span>{text}</span>;

View File

@@ -0,0 +1,11 @@
import * as React from "react";
interface Props {
foo: boolean;
}
export default class MyComponent extends React.Component<Props> {
render() {
return this.props.foo ? <div/> : null;
}
}

View File

@@ -5,7 +5,7 @@ import dynamic, { LoadingComponentProps } from "next/dynamic";
interface MyComponentProps {
foo: string;
}
const MyComponent: React.FunctionComponent<MyComponentProps> = () => <div>I'm async!</div>;
const MyComponent: React.StatelessComponent<MyComponentProps> = () => <div>I'm async!</div>;
const asyncComponent = Promise.resolve(MyComponent);
// Examples from
@@ -17,17 +17,33 @@ const LoadingComponent: React.StatelessComponent<LoadingComponentProps> = ({
}) => <p>loading...</p>;
// 1. Basic Usage (Also does SSR)
const DynamicComponent = dynamic(asyncComponent);
const DynamicComponent = dynamic(Promise.resolve(MyComponent));
const dynamicComponentJSX = <DynamicComponent foo="bar" />;
// 1.1 Basic Usage (Loader function, module shape with 'export = Component' / 'module.exports = Component')
const DynamicComponent2 = dynamic(() => Promise.resolve(MyComponent));
const dynamicComponent2JSX = <DynamicComponent2 foo="bar" />;
// 1.2 Basic Usage (Loader function, module shape with 'export default Component')
const DynamicComponent3 = dynamic(() => Promise.resolve({ default: MyComponent }));
const dynamicComponent3JSX = <DynamicComponent3 foo="bar" />;
// TODO: Work with module shape 'export { Component }'
// 2. With Custom Loading Component
const DynamicComponentWithCustomLoading = dynamic(asyncComponent, {
const DynamicComponentWithCustomLoading = dynamic(import('./imports/with-default'), {
loading: LoadingComponent
});
const dynamicComponentWithCustomLoadingJSX = <DynamicComponentWithCustomLoading foo="bar" />;
const dynamicComponentWithCustomLoadingJSX = <DynamicComponentWithCustomLoading foo />;
// 2.1. With Custom Loading Component (() => import('') syntax)
const DynamicComponentWithCustomLoading2 = dynamic(() => import('./imports/with-default'), {
loading: LoadingComponent
});
const dynamicComponentWithCustomLoading2JSX = <DynamicComponentWithCustomLoading2 foo />;
// 3. With No SSR
const DynamicComponentWithNoSSR = dynamic(asyncComponent, {
const DynamicComponentWithNoSSR = dynamic(() => import('./imports/with-default'), {
ssr: false
});
@@ -35,8 +51,8 @@ const DynamicComponentWithNoSSR = dynamic(asyncComponent, {
const HelloBundle = dynamic<MyComponentProps>({
modules: () => {
const components = {
Hello1: asyncComponent,
Hello2: asyncComponent
Hello1: () => import('./imports/with-default'),
Hello2: () => import('./imports/with-default')
};
return components;
@@ -53,7 +69,7 @@ const helloBundleJSX = <HelloBundle foo="bar" />;
// 5. With plain Loadable options
const LoadableComponent = dynamic({
loader: () => asyncComponent,
loader: () => import('./imports/with-default'),
loading: LoadingComponent,
delay: 200,
timeout: 10000

View File

@@ -38,6 +38,8 @@
"test/next-link-tests.tsx",
"test/next-dynamic-tests.tsx",
"test/next-router-tests.tsx",
"test/next-component-tests.tsx"
"test/next-component-tests.tsx",
"test/imports/no-default.tsx",
"test/imports/with-default.tsx"
]
}