How to use the @storybook/theming.convert function in @storybook/theming

it('should have one tab per groupId and an empty Other tab when all are defined', () => {
      const root = mount(
        
          
        
      );

      testChannel.on.mock.calls[0][1]({
        knobs: {
          foo: {
            name: 'foo',
            defaultValue: 'test',
            used: true,
            groupId: 'foo',
          },
          bar: {
            name: 'bar',
            defaultValue: 'test2',
            used: true,

addDecorator(storyFn => (
  
    
    {storyFn()}
  
));

import React from 'react';
import { themes, ThemeProvider, convert } from '@storybook/theming';
import { action } from '@storybook/addon-actions';

import SidebarHeading from './SidebarHeading';

const { light } = themes;
const theme = convert(light);

export default {
  component: SidebarHeading,
  title: 'UI|Sidebar/SidebarHeading',
  decorators: [
    (storyFn: any) => (
      <div style="{{">
        {storyFn()}
      </div>
    ),
  ],

addDecorator(storyFn => (
  
    
    {storyFn()}
  
));

key={`progress-portion-${entry[0]}`}
                            color={getColorByType(entry[0])}
                            progressPercent={
                              entry[1]
                                ? (entry[1].length / result.assertionResults.length) * 100
                                : 0
                            }
                          />
                        );
                      })}
                    
                  ) : null}
                
                
                  <div color="{getColorByType(StatusTypes.FAILED_TYPE)}" title="{`${" id="failing-tests">
                    
                      {testsByType.get(StatusTypes.FAILED_TYPE) ? (
                        testsByType.get(StatusTypes.FAILED_TYPE).map((res: any) =&gt; (
                          
                            
                          </div>

const DocsContent = ({ title, content, editUrl, ...rest }) => (
  <div id="docs-content">
    <div>
      <h2>{title}</h2>
      <p>
        <a rel="noopener noreferrer" href="{editUrl}">
          Edit this page
        </a>
      </p>
      <div>
        
          {parse(content, {
            replace: domNode =&gt; {
              if (
                domNode.name === 'pre' &amp;&amp;
                domNode.children.find(
                  n =&gt; n.name === 'code' &amp;&amp; n.attribs.class &amp;&amp; n.attribs.class.match(/^language-/)
                )
              ) {
                const language = domNode.children[0].attribs.class.replace('language-', '');
                const code = domNode.children[0].children[0].data;
                return (
                  
                    {code}
                  
                );
              }</div></div></div>