javascript 在jest和react测试库中使用'ua-parser-js'插件对react组件进行单元测试

qcuzuvrc  于 2023-01-24  发布在  Java
关注(0)|答案(1)|浏览(142)

我创建了一个非常简单的组件,它根据您使用的操作系统(在我的示例中是iOS和Android)显示图像

import { UAParser } from "ua-parser-js";

export const DownloadApp = ({ appleStoreUrl, playStoreUrl }: DownloadAppProps): JSX.Element => {
  const parser = new UAParser();
  const os = parser.getOS();

return (<div className="flex h-12">
        {os.name === "iOS" && (
          <div>
            <a href={appleStoreUrl} title="Apple App Store">
              <AppleAppStore height="48" />
            </a>
          </div>
        )}

        {(os.name === "Android" || os.name === "Android[-x86]") && (
          <div className="shrink">
            <a href={playStoreUrl} title="Google Play Store">
              <GooglePlayStore height="48" />
            </a>
          </div>
        )}
</div>)}

当在设备上手动测试时,这一切都工作得很好,但我试图在react-testing-libraryjest中编写一些单元测试,以检查是否根据操作系统响应显示了正确的图像。
我试过模拟ua-parser-js库,但我总是需要示例化库来获得getOS()函数,我想设置该函数的mockImplementation以返回iOS和Android,但它似乎完全忽略了模拟,只是调用ua-parser-js包并返回undefined。

eyh26e7m

eyh26e7m1#

除了模仿ua-parser-js之外,还有一个选项是用jest模仿userAgent getter,通过这种方法,您可以使用任何您喜欢的用户代理来匹配您的测试场景。
在beforeEach中:

const userAgentGetter = jest.spyOn(window.navigator, 'userAgent', 'get')
userAgentGetter.mockReturnValue('Mozilla/5.0 (Macintosh; Intel Mac OS X 13_1) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.1 Safari/605.1.15')

在您的售后服务中:

jest.restoreAllMocks()

相关问题