{/* prettier-ignore */}
{/*
Copyright 2023 Comcast Cable Communications Management, LLC

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

SPDX-License-Identifier: Apache-2.0
\*/}

import { Meta } from '@storybook/blocks';

<Meta title="Docs / Unit Testing / Test Renderer / toJSON" />

# toJSON

Convert Lightning components to JSON to be used in [Jest Snapshot Tests](https://jestjs.io/docs/snapshot-testing).

## Arguments

`toJSON(element, { children } = {})`

| argument       | type              | default             | description                                                                                                        |
| -------------- | ----------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------ |
| element        | Lightning.Element | -                   | element to create JSON from                                                                                        |
| \{ children \} | object            | \{ children: 100 \} | object with `children` property to define the number of layers deep in the render tree should be converted to JSON |

##### Example: Snapshot testing using `TestRenderer.toJSON` and Jest's `toMatchSnapshot` matcher

```js
import lng from '@lightningjs/core';
import { TestRenderer } from '@lightningjs/ui-components-test-utils';

class TestComp extends lng.Component {
  static _template() {
    return {
      TextElement: {
        text: { text: 'foo' }
      }
    };
  }
}

it('should match the snapshot for the component', () => {
  const testRenderer = TestRenderer.create({ Component: { type: TestComp } });
  const testCompInstance = testRenderer.getInstance();
  const tree = TestRenderer.toJSON(testCompInstance, { children: 1 });
  expect(tree).toMatchSnapshot();
});
```
