@component-controls/test-renderers NPM

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* (`propsname`: `stringstoryName`: `stringid`: `stringrawId`: `stringdoc`: `stringstoryFn`: StoryRenderFn`description`: `stringarguments`: StoryArguments`loc`: CodeLocation`source`: `stringsubtitle`: `stringdynamic`: `booleandynamicId`: `stringcomponentat`: `subcomponents`: `Record`<`string`, (`string`, `Record`<`string`, `unknown`>, `ElementType`<`Props`>)>`controls`: ComponentControls`smartControls`: `decorators`: `plugins`: `category`: ) => `Example`<>`bind`: function* (`props`: ) => `Example`<`Props`>`storyName`: `stringid`: `stringrawId`: `stringdoc`: `stringstoryFn`: StoryRenderFn`description`: `stringloc`: CodeLocation`source`: `stringsubtitle`: `stringdynamic`: `booleandynamicId`: `stringcomponentat`: `subcomponents`: `Record`<`string`, (`string`, `Record`<`string`, `unknown`>, `ElementType`<`Props`>)>`smartControls`: SmartControls`decorators`: `StoryRenderFn`[]`plugins`: `anycategory`: `stringcontrols`: `storyName`: `stringid`: `stringrawId`: `stringdoc`: `stringstoryFn`: function* (`controlValues`[`string`]: `anycontext`: `any`) => `Promise` \| `anydescription`: `stringlocstart``line`: `numbercolumn`: `numberend``line`: `numbercolumn`: `numbersource`: `stringsubtitle`: `stringdynamic`: `booleandynamicId`: `stringcomponentat`: function* (`index`*: `number`) => `T` \| `undefinedsubcomponents`: `Record`<`string`, (`string`, `Record`<`string`, `unknown`>, `ElementType`<`Props`>)>`smartControlssmart`: `booleaninclude`: `string`[] \| `IncludeFnexclude`: `string`[] \| `IncludeFndecorators`: `StoryRenderFn`[]`plugins`: `anycategory`: `stringcontrols`[`string`]: `ComponentControl` \| `any`
`doc*`	`Document`<>[`string`]: `anytitle`: `stringtype`: `"story"` \| `"blog"` \| `"page"` \| `"tags"` \| `"author"` \| `stringroute`: `stringdate`: `stringdateModified`: `stringstatus`: `"draft"` \| `"published"tags`: `string`[]`keywords`: `string`[]`description`: `string` \| `JSX.Elementimage`: `stringauthor`: `stringorder`: `numbermenu`: `stringtemplatebind`: function (`props`: ) => `Example`<`Props`>`storyName`: `stringid`: `stringrawId`: `stringdoc`: `stringstoryFn`: StoryRenderFn`description`: `stringloc`: CodeLocation`source`: `stringsubtitle`: `stringdynamic`: `booleandynamicId`: `stringcomponentat`: `subcomponents`: `Record`<`string`, (`string`, `Record`<`string`, `unknown`>, `ElementType`<`Props`>)>`smartControls`: SmartControls`decorators`: `StoryRenderFn`[]`plugins`: `anycategory`: `stringcontrols`: `stories`: `string`[]`source`: `stringfileName`: `stringpackage`: `stringtestFiles`: `string`[]`testCoverage`: `string`[]`testData`: `stringrenderFn`: function* (`props``story``name`: `stringstoryName`: `stringid`: `stringrawId`: `stringdoc`: `stringstoryFn`: StoryRenderFn`description`: `stringarguments`: StoryArguments`loc`: CodeLocation`source`: `stringsubtitle`: `stringdynamic`: `booleandynamicId`: `stringcomponent`: `string` \| `Record`<`string`, `unknown`> \| `ElementType`<`Props`>`subcomponents`: `Record`<`string`, (`string`, `Record`<`string`, `unknown`>, `ElementType`<`Props`>)>`controls`: ComponentControls`smartControls`: `decorators`: `plugins`: `category`: `doctitle`: `stringtype`: DocType`route`: `stringdate`: `stringdateModified`: `stringstatus`: `"draft"` \| `"published"tags`: `string`[]`keywords`: `string`[]`description`: `string` \| `JSX.Elementimage`: `stringauthor`: `stringorder`: `numbermenu`: `stringtemplate`: `Example`<`Props`>`stories`: `string`[]`source`: `stringfileName`: `stringpackage`: `stringtestFiles`: `string`[]`testCoverage`: `string`[]`testData`: `stringrenderFn`: FrameworkRenderFn`data`: DocumentData`componentsLookup`[`string`]: `stringMDXPage`: `anyisMDXComponent`: `booleanparameters`: `anycomponent`: `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`) => `anydata`[`string`]: `componentsLookup`[`string`]: `stringMDXPage`: `anyisMDXComponent`: `booleanparameters`: `anycomponentat`: function (`index`*: `number`) => `T` \| `undefinedsubcomponents`: `Record`<`string`, (`string`, `Record`<`string`, `unknown`>, `ElementType`<`Props`>)>`controls`[`string`]: `ComponentControlText` \| `ComponentControlBoolean` \| `ComponentControlColor` \| `ComponentControlDate` \| `ComponentControlObject`<> \| `ComponentControlButton`<> \| `ComponentControlOptions`<> \| `ComponentControlNumber` \| `ComponentControlArray` \| `ComponentControlFilessmartControlssmart`: `booleaninclude`: `string`[] \| `IncludeFnexclude`: `string`[] \| `IncludeFndecorators`: `StoryRenderFn`[]`plugins`: `anycategory`: `stringnavSidebar`: `booleancontextSidebar`: `booleanfullPage`: `boolean`
`config*`	`typecontrols`[`string`]: `ComponentControlText` \| `ComponentControlBoolean` \| `ComponentControlColor` \| `ComponentControlDate` \| `ComponentControlObject`<> \| `ComponentControlButton`<> \| `ComponentControlOptions`<> \| `ComponentControlNumber` \| `ComponentControlArray` \| `ComponentControlFilesdescription`: `stringcomponent`: `string` \| `Record`<`string`, `unknown`> \| `ElementType`<`Props`>`subcomponents`: `Record`<`string`, (`string`, `Record`<`string`, `unknown`>, `ElementType`<`Props`>)>`smartControlssmart`: `booleaninclude`: `string`[] \| `IncludeFnexclude`: `string`[] \| `IncludeFndecorators`: `StoryRenderFn`[]`plugins`: `anycategory`: `stringauthor`: `stringtitle`: `stringlogo`: `string` \| `ReactNodeapppropTypes`: `WeakValidationMap`<> \| `undefinedcontextTypes`: `ValidationMap`<> \| `undefineddefaultProps`: `Partial`<`P`> \| `undefineddisplayName`: `string` \| `undefinedcopyright`: `stringlanguage`: `stringimage`: `stringlinks`: (`DetailedHTMLProps`<>)[]`seo`: `ReactChild` \| `ReactFragment` \| `ReactPortal` \| `boolean` \| `null` \| `undefinedpages`[`string`]: `typebasePath`: `stringsideNav`: SideNavConfiguration`label`: `stringindexHome`: `booleantopMenu`: `booleancontainer`: `ComponentType` \| `nulltabs`: `Record`<`string`, `TabConfiguration`>`navSidebar`: `contextSidebar`: `fullPage`: `theme`[`string`]: `anystorySort`: function* (`a`: `stringb`: `string`) => `numbertoolbarleft`: ActionItems`right`: ActionItems`footerleft`: ActionItems`right`: ActionItems`sidebar`: `ActionItem`[]`menu`: `StaticMenuItem`[]`components`: `Record`<`string`, `unknown`>`analytics`: `anyrenderFn`: function (`props``story``name`: `stringstoryName`: `stringid`: `stringrawId`: `stringdoc`: `stringstoryFn`: StoryRenderFn`description`: `stringarguments`: StoryArguments`loc`: CodeLocation`source`: `stringsubtitle`: `stringdynamic`: `booleandynamicId`: `stringcomponent`: `string` \| `Record`<`string`, `unknown`> \| `ElementType`<`Props`>`subcomponents`: `Record`<`string`, (`string`, `Record`<`string`, `unknown`>, `ElementType`<`Props`>)>`controls`: ComponentControls`smartControls`: `decorators`: `plugins`: `category`: `doctitle`: `stringtype`: DocType`route`: `stringdate`: `stringdateModified`: `stringstatus`: `"draft"` \| `"published"tags`: `string`[]`keywords`: `string`[]`description`: `string` \| `JSX.Elementimage`: `stringauthor`: `stringorder`: `numbermenu`: `stringtemplatebind`: `storyName`: `id`: `rawId`: `doc`: `storyFn`: `description`: `loc`: `source`: `subtitle`: `dynamic`: `dynamicId`: `component`: `subcomponents`: `smartControls`: `decorators`: `plugins`: `category`: `controls`: `stories`: `string`[]`source`: `stringfileName`: `stringpackage`: `stringtestFiles`: `string`[]`testCoverage`: `string`[]`testData`: `stringrenderFn`: FrameworkRenderFn`data`: DocumentData`componentsLookup`[`string`]: `stringMDXPage`: `anyisMDXComponent`: `booleanparameters`: `anycomponent`: `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`) => `anywebpack`: `Configuration` \| `WebpackConfigFnfinalWebpack`: `Configuration` \| `WebpackConfigFnpresets`: `RuleType`[]`configPath`: `stringdistFolder`: `stringbundleName`: `stringstaticFolder`: `stringcssFileName`: `stringlogOptions`: `Partial`<`LogOptions`>`mode`: `"none"` \| `"development"` \| `"production"loadersat`: function* (`index`: ) => `T` \| `undefinedmodule`: `stringident`: `stringloader`: `stringoptions`: `string` \| `typestories`: `string` \| `string`[]`files`: `string` \| `string`[]`siteRoot`: `stringignore`: `string`[]`categories`: `DocType`[]`siteMap`: `type` \| `booleansiteUrl`: `stringinstrument`: `anysearchindexingModule`: `stringsearchingModule`: `stringfields`: `SearchFields`[]`emptySearchDocuments`: `string`[]`hitsPerPage`: `numberoptions`: `anytokensfigmaAccessToken`: `stringgithubAccessToken`: `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`: `Elementargs`: `any`[]) => `Promise` \| `T`	callback that will be usd
`args*`	`any`[]	optional arguments for the callback function
`returns`	`Promise`<(`T`, `undefined`)>