@component-controls/test-renderers

Table of contents

• Overview
• Installation
• API
  • renderExample
  • renderDocument
  • reactRunDOM
  • renderErr
  • componentErr

Overview

A collection of test renderers for react

Installation

This package is usually installed as part of the @component-controls package, but you can also install it standalone:

$ npm install @component-controls/test-renderers --save-dev

API

renderExample

react component

render an example using a test framework.

defined in @component-controls/test-renderers/plugins/test-renderers/src/render-example.ts

properties

Name	Type
example*	Example<> bind*: function ( props name*: string storyName: string id: string rawId: string doc: string storyFn: StoryRenderFn description: string arguments: StoryArguments loc: CodeLocation source: string subtitle: string dynamic: boolean dynamicId: string component at*: subcomponents: Record<string, (string, Record<string, unknown>, ElementType<Props>)> controls: ComponentControls smartControls*: decorators*: plugins*: category*: ) => Example<> bind*: function ( props*: ) => Example<Props> storyName: string id: string rawId: string doc: string storyFn: StoryRenderFn description: string loc: CodeLocation source: string subtitle: string dynamic: boolean dynamicId: string component at*: subcomponents: Record<string, (string, Record<string, unknown>, ElementType<Props>)> smartControls: SmartControls decorators: StoryRenderFn[] plugins: any category: string controls*: storyName: string id: string rawId: string doc: string storyFn: function ( controlValues [string]: any context: any ) => Promise | any description: string loc start* line*: number column*: number end* line*: number column*: number source: string subtitle: string dynamic: boolean dynamicId: string component at*: function ( index*: number ) => T | undefined subcomponents: Record<string, (string, Record<string, unknown>, ElementType<Props>)> smartControls smart: boolean include: string[] | IncludeFn exclude: string[] | IncludeFn decorators: StoryRenderFn[] plugins: any category: string controls [string]: ComponentControl | any
doc*	Document<> [string]: any title*: string type: "story" | "blog" | "page" | "tags" | "author" | string route: string date: string dateModified: string status: "draft" | "published" tags: string[] keywords: string[] description: string | JSX.Element image: string author: string order: number menu: string template bind*: function ( props*: ) => Example<Props> storyName: string id: string rawId: string doc: string storyFn: StoryRenderFn description: string loc: CodeLocation source: string subtitle: string dynamic: boolean dynamicId: string component at*: subcomponents: Record<string, (string, Record<string, unknown>, ElementType<Props>)> smartControls: SmartControls decorators: StoryRenderFn[] plugins: any category: string controls*: stories: string[] source: string fileName: string package: string testFiles: string[] testCoverage: string[] testData: string renderFn: function ( props* story* name*: string storyName: string id: string rawId: string doc: string storyFn: StoryRenderFn description: string arguments: StoryArguments loc: CodeLocation source: string subtitle: string dynamic: boolean dynamicId: string component: string | Record<string, unknown> | ElementType<Props> subcomponents: Record<string, (string, Record<string, unknown>, ElementType<Props>)> controls: ComponentControls smartControls*: decorators*: plugins*: category*: doc title*: string type: DocType route: string date: string dateModified: string status: "draft" | "published" tags: string[] keywords: string[] description: string | JSX.Element image: string author: string order: number menu: string template: Example<Props> stories: string[] source: string fileName: string package: string testFiles: string[] testCoverage: string[] testData: string renderFn: FrameworkRenderFn data: DocumentData componentsLookup [string]: string MDXPage: any isMDXComponent: boolean parameters: any component: string | Record<string, unknown> | ElementType<Props> subcomponents: Record<string, (string, Record<string, unknown>, ElementType<Props>)> controls: ComponentControls smartControls*: decorators*: plugins*: category*: navSidebar*: contextSidebar*: fullPage*: values: ExampleControls options: any ) => any data [string]: componentsLookup [string]: string MDXPage: any isMDXComponent: boolean parameters: any component at*: function ( index*: number ) => T | undefined subcomponents: Record<string, (string, Record<string, unknown>, ElementType<Props>)> controls [string]: ComponentControlText | ComponentControlBoolean | ComponentControlColor | ComponentControlDate | ComponentControlObject<> | ComponentControlButton<> | ComponentControlOptions<> | ComponentControlNumber | ComponentControlArray | ComponentControlFiles smartControls smart: boolean include: string[] | IncludeFn exclude: string[] | IncludeFn decorators: StoryRenderFn[] plugins: any category: string navSidebar: boolean contextSidebar: boolean fullPage: boolean
config*	type controls [string]: ComponentControlText | ComponentControlBoolean | ComponentControlColor | ComponentControlDate | ComponentControlObject<> | ComponentControlButton<> | ComponentControlOptions<> | ComponentControlNumber | ComponentControlArray | ComponentControlFiles description: string component: string | Record<string, unknown> | ElementType<Props> subcomponents: Record<string, (string, Record<string, unknown>, ElementType<Props>)> smartControls smart: boolean include: string[] | IncludeFn exclude: string[] | IncludeFn decorators: StoryRenderFn[] plugins: any category: string author: string title: string logo: string | ReactNode app propTypes: WeakValidationMap<> | undefined contextTypes: ValidationMap<> | undefined defaultProps: Partial<P> | undefined displayName: string | undefined copyright: string language: string image: string links: (DetailedHTMLProps<>)[] seo: ReactChild | ReactFragment | ReactPortal | boolean | null | undefined pages [string]: type basePath: string sideNav: SideNavConfiguration label: string indexHome: boolean topMenu: boolean container: ComponentType | null tabs: Record<string, TabConfiguration> navSidebar*: contextSidebar*: fullPage*: theme [string]: any storySort: function ( a*: string b*: string ) => number toolbar left: ActionItems right: ActionItems footer left: ActionItems right: ActionItems sidebar: ActionItem[] menu: StaticMenuItem[] components: Record<string, unknown> analytics: any renderFn: function ( props* story* name*: string storyName: string id: string rawId: string doc: string storyFn: StoryRenderFn description: string arguments: StoryArguments loc: CodeLocation source: string subtitle: string dynamic: boolean dynamicId: string component: string | Record<string, unknown> | ElementType<Props> subcomponents: Record<string, (string, Record<string, unknown>, ElementType<Props>)> controls: ComponentControls smartControls*: decorators*: plugins*: category*: doc title*: string type: DocType route: string date: string dateModified: string status: "draft" | "published" tags: string[] keywords: string[] description: string | JSX.Element image: string author: string order: number menu: string template bind*: storyName*: id*: rawId*: doc*: storyFn*: description*: loc*: source*: subtitle*: dynamic*: dynamicId*: component*: subcomponents*: smartControls*: decorators*: plugins*: category*: controls*: stories: string[] source: string fileName: string package: string testFiles: string[] testCoverage: string[] testData: string renderFn: FrameworkRenderFn data: DocumentData componentsLookup [string]: string MDXPage: any isMDXComponent: boolean parameters: any component: string | Record<string, unknown> | ElementType<Props> subcomponents: Record<string, (string, Record<string, unknown>, ElementType<Props>)> controls: ComponentControls smartControls*: decorators*: plugins*: category*: navSidebar*: contextSidebar*: fullPage*: values: ExampleControls options: any ) => any webpack: Configuration | WebpackConfigFn finalWebpack: Configuration | WebpackConfigFn presets: RuleType[] configPath: string distFolder: string bundleName: string staticFolder: string cssFileName: string logOptions: Partial<LogOptions> mode: "none" | "development" | "production" loaders at*: function ( index*: ) => T | undefined module: string ident: string loader: string options: string | type stories: string | string[] files: string | string[] siteRoot: string ignore: string[] categories: DocType[] siteMap: type | boolean siteUrl: string instrument: any search indexingModule: string searchingModule*: string fields: SearchFields[] emptySearchDocuments: string[] hitsPerPage: number options: any tokens figmaAccessToken: string githubAccessToken: string
values	ExampleControls [string]: ComponentControl | any

renderDocument

function

returns an array of the rendered all stories(examples) imports from a document using a test framework.

defined in @component-controls/test-renderers/plugins/test-renderers/src/render-document.ts

parameters

Name	Type	Description
param0*	type [string]: Document<> | Example<>	inputs as example, doc, project folder and a selected test rendering framework
config*	string | RunConfiguration
data	Record<string, ExampleControls>
returns	type[]	an array of the rendered examples

reactRunDOM

async function

defined in @component-controls/test-renderers/plugins/test-renderers/src/react-run-dom.ts

parameters

Name	Type	Description
el*	ReactElement<> | (ReactElement<>)[]	array of react elements to render
fn*	function ( e*: Element args*: any[] ) => Promise | T	callback that will be usd
args*	any[]	optional arguments for the callback function
returns	Promise<(T, undefined)>

renderErr

react component

defined in @component-controls/test-renderers/plugins/test-renderers/src/index.ts

componentErr

react component

defined in @component-controls/test-renderers/plugins/test-renderers/src/index.ts