# @depack/context
[](https://npmjs.org/package/@depack/context)
`@depack/context` is The Test Context To Render JSX Into Strings For Mask Testing With Zoroaster.
```sh
yarn add -E @depack/context
```
## Table Of Contents
- [Table Of Contents](#table-of-contents)
- [API](#api)
- [class JSXContext](#class-jsxcontext)
* [`getVNode(input: string, context?: *): Preact.VNode`](#getvnodeinput-stringcontext--preactvnode)
* [`render(vnode: VNode, opts?: RenderConfig, contexts?: {}): string`](#rendervnode-vnodeopts-renderconfigcontexts--string)
* [`RenderConfig`](#type-renderconfig)
- [Using In A Test](#using-in-a-test)
- [Copyright](#copyright)
## API
The package is available by importing its default function:
```js
import JSXContext from '@depack/context'
```
## class JSXContext
This instance of the test context provides the testing API for JSX components.
### `getVNode(`
`input: string,`
`context?: *,`
`): Preact.VNode`
Transforms the string input into JSX VNode. The global variables and references can be passed in the context.
```jsx
/* yarn example/ */
import JSXContext from '@depack/context'
const Container = ({ children }) => ({
children
})
const context = new JSXContext()
const s = context.getVNode(
`
Example
`,
{ Container },
)
```
```js
VNode {
nodeName: [Function: Container],
children:
[ VNode {
nodeName: 'div',
children:
[ VNode {
nodeName: 'span',
children: [ 'Example' ],
attributes: {},
key: undefined } ],
attributes:
{ id: 'id',
className: 'Class',
required: '' },
key: undefined } ],
attributes: {},
key: undefined }
```
### `render(`
`vnode: VNode,`
`opts?: RenderConfig,`
`contexts?: {},`
`): string`
Renders the JSX into the string.
`import('preact').VNode` __`VNode`__
__`RenderConfig`__: Rendering options.
| Name | Type | Description | Default |
| ---------- | --------- | ----------------------------------------------------------------------------------------------------------------- | ------- |
| addDoctype | _boolean_ | Adds the `` at the beginning of the return string. | `false` |
| shallow | _boolean_ | If `true`, renders nested Components as HTML elements (``). | `false` |
| xml | _boolean_ | If `true`, uses self-closing tags for elements without children. | `false` |
| pretty | _boolean_ | If `true`, adds ` ` whitespace for readability. Pass a string to indicate the indentation character, e.g., `\t`. | `false` |
| lineLength | _number_ | The number of characters on one line above which the line should be split in the `pretty` mode. | `40` |
```jsx
import JSXContext from '@depack/context'
const context = new JSXContext()
const s = context.render(
Example
,
{ pretty: true })
console.log(s)
```
```js
Example
```
## Using In A Test
The test context is made for mask-testing of the applications. A mask test will have the setup script called `test/mask/default.js` that points to the result mask in its body.
```js
import { makeTestSuite } from 'zoroaster'
import JSXContext from '@depack/context'
import render from '../../src'
export default makeTestSuite('test/result/index.html', {
/**
* @param {string} input
* @param {JSXContext} c
*/
getResults(input, { getVNode }) {
const test = getVNode(input)
const res = render(test)
return res
},
context: [JSXContext],
})
```
The actual mappings of inputs to outputs are put in the mask `test/result/index.html`:
```html
// returns the correct output
/* expected */
/**/
```
Each mask setup will pass its properties and point to other input files:
```js
export const pretty = makeTestSuite('test/result/pretty.html', {
/**
* @param {string} input
* @param {JSXContext} c
*/
getResults(input, { getVNode }) {
const test = getVNode(input)
const res = render(test, { pretty: true })
return res
},
context: [JSXContext],
})
```
For example, the pretty-printing adds the additional attribute and points to the results at `test/result/pretty.html`. The file extension just enables syntax highlighting in those files so it's easier on the eye.
```html
// returns the correct output
Hello World
/* expected */
Hello World
/**/
// prettifies dangerously set inner html
/* expected */
Your name, your name, what is your name?
/**/
```
## Copyright
