我们的应用程序是以标准方式使用
我们想使用React测试库(或类似工具)测试应用程序的各个组件。当然,如果要像下面的简单测试一样正确呈现React组件(例如
有没有适当的方法来模拟MSAL身份验证过程以进行此类测试?是否有一种方法可以将待测试的组件包装在MSAL中,并直接向该待测组件提供测试用户的凭据?如果您能给出有用的文档、博客文章、视频等参考资料,将不胜感激。
一个简单的测试:
@azure/msal-react
中的MSAL身份验证模板包装的 - 关键代码段如下所述。我们想使用React测试库(或类似工具)测试应用程序的各个组件。当然,如果要像下面的简单测试一样正确呈现React组件(例如
SampleComponentUnderTest
),则必须将其包装在MSAL组件中。有没有适当的方法来模拟MSAL身份验证过程以进行此类测试?是否有一种方法可以将待测试的组件包装在MSAL中,并直接向该待测组件提供测试用户的凭据?如果您能给出有用的文档、博客文章、视频等参考资料,将不胜感激。
一个简单的测试:
test('first test', () => {
const { getByText } = render(<SampleComponentUnderTest />);
const someText = getByText('A line of text');
expect(someText).toBeInTheDocument();
});
配置
export const msalConfig: Configuration = {
auth: {
clientId: `${process.env.REACT_APP_CLIENT_ID}`,
authority: `https://login.microsoftonline.com/${process.env.REACT_APP_TENANT_ID}`,
redirectUri:
process.env.NODE_ENV === 'development'
? 'http://localhost:3000/'
: process.env.REACT_APP_DEPLOY_URL,
},
cache: {
cacheLocation: 'sessionStorage',
storeAuthStateInCookie: false,
},
system: {
loggerOptions: {
loggerCallback: (level, message, containsPii) => {
if (containsPii) {
return;
}
switch (level) {
case LogLevel.Error:
console.error(message);
return;
case LogLevel.Info:
console.info(message);
return;
case LogLevel.Verbose:
console.debug(message);
return;
case LogLevel.Warning:
console.warn(message);
return;
default:
console.error(message);
}
},
},
},
};
主应用程序组件
const msalInstance = new PublicClientApplication(msalConfig);
<MsalProvider instance={msalInstance}>
{!isAuthenticated && <UnauthenticatedHomePage />}
{isAuthenticated && <Protected />}
</MsalProvider>
未经身份验证的组件
const signInClickHandler = (instance: IPublicClientApplication) => {
instance.loginRedirect(loginRequest).catch((e) => {
console.log(e);
});
};
<UnauthenticatedTemplate>
<Button onClick={() => signInClickHandler(instance)}>Sign in</Button>
</UnauthenticatedTemplate>
受保护的组件
<MsalAuthenticationTemplate
interactionType={InteractionType.Redirect}
errorComponent={ErrorComponent}
loadingComponent={LoadingComponent}
>
<SampleComponentUnderTest />
</MsalAuthenticationTemplate>