Let's assume I have a SPFx solution with a component that is using localized strings:
SiteConfig.tsx
import strings from 'CorporateDesignApplicationCustomizerStrings';
const SiteConfig: React.FunctionComponent<ISiteConfigProps> = (props) => {
    const [msgTxt, setMsgTxt] = React.useState<string>();
    setMsgTxt(strings.MsgUpdating)  //"Few more things. We are now updating site logo and creating a few pages. Please wait.");
    return (<>
    {   msgTxt &&
            <MessageBar data-testid="messagebar">
                {
                    <div dangerouslySetInnerHTML={{ __html: msgTxt }} />
                }
            </MessageBar>
    }
    </>);
}
export default SiteConfig;
My test is rather simple:
SiteConfig.test.tsx
describe("SiteConfig", () => {
    let mockPageContext: PageContext;
    let mockSPFI: SPFI;
    let siteConfig: RenderResult;
    it("should render correctly", async () => {
        await act(async () => {
            siteConfig = render(<SiteConfig />);
        });
        expect(siteConfig.getByTestId('messagebar')).toBeInTheDocument();
    });
//...
}
The problem
And the result... is FAIL: Cannot find module 'CorporateDesignApplicationCustomizerStrings' from 'src/extensions/corporateDesign/components/SiteConfig/SiteConfig.tsx'
The solution
The solution is an extremely easy one. 
Add "CorporateDesignApplicationCustomizerStrings": "identity-obj-proxy" line in package.json:
package.json
{
    //...
    "jest": {
        "moduleNameMapper": {
            "CorporateDesignApplicationCustomizerStrings": "identity-obj-proxy"
        }
    }
}
And mock your strings as a constant:
SiteConfig.test.tsx
jest.mock('CorporateDesignApplicationCustomizerStrings', () => {
    return {
        MsgUpdating: "a",
        MsgUpdated: "b"
    }
    { virtual: true }
})
describe("SiteConfig", () => {
    //...
}
Solution found in surajit09's answer
 


 
    
Top comments (0)