如何解决如何使用 Sinon 和 ReactJS 模拟模块导入
我正在尝试为我用 TS 编写的 React 组件之一编写单元测试:
import React,{ useContext } from 'react';
import Lottie from 'lottie-react-web';
import { ConfigContext } from '../ConfigProvider';
import type { UIKitFC } from '../../types/react-extensions';
// interfaces
export interface LoadingOverlayProps {
size: 'large' | 'medium' | 'small';
testId?: string;
}
interface LoaderProps {
size: 'large' | 'medium' | 'small';
}
const G3Loader: React.FC<LoaderProps> = ({ size }) => {
const options = { animationData };
const pxSize =
size === 'small' ? '100px' : size === 'medium' ? '200px' : '300px';
const height = pxSize,width = pxSize;
return (
<div className="loader-container">
<Lottie options={options} height={height} width={width} />
<div className="loader__loading-txt">
<div>
<h4>Loading...</h4>
</div>
</div>
</div>
);
};
/**
* Description of Loading Overlay component
*/
export const LoadingOverlay: UIKitFC<LoadingOverlayProps> = (props) => {
const { testId } = props;
const { namespace } = useContext(ConfigContext);
const { baseClassName } = LoadingOverlay.constants;
const componentClassName = `${namespace}-${baseClassName}`;
const componentTestId = testId || `${namespace}-${baseClassName}`;
return (
<div id={componentTestId} className={componentClassName}>
<G3Loader size={props.size} />
</div>
);
};
LoadingOverlay.constants = {
baseClassName: 'loadingOverlay',};
LoadingOverlay.defaultProps = {
testId: 'loadingOverlay',};
export default LoadingOverlay;
该组件使用导入的模块“Lottie”来制作一些动画,但我对测试它不感兴趣,我只想测试我的组件及其道具。
问题是,当我运行单元测试时,出现错误: 错误:未实现:HTMLCanvasElement.prototype.getContext(未安装画布 npm 包)
经过一些研究,我得出结论,错误是由 Lottie 导入引起的,因此我想模拟它以进行测试。我正在使用 Mocha 和 Sinon 的存根功能来尝试模拟库导入,但同样的错误仍然存在,让我觉得我没有正确地存根模块。这是我最近一次单元测试的尝试:
import React from 'react';
import * as Lottie from 'lottie-react-web';
import { render } from '@testing-library/react';
import { expect } from 'chai';
import * as sinon from 'sinon';
import LoadingOverlay from '../src/components/LoadingOverlay';
const TEST_ID = 'the-test-id';
const FakeLottie: React.FC = (props) => {
return <div>{props}</div>;
};
describe('Loading Overlay',() => {
// beforeEach(function () {
// sinon.stub(Lottie,'default').callsFake((props) => FakeLottie(props));
// });
console.log('11111');
it('should have a test ID',() => {
sinon.stub(Lottie,'default').callsFake((props) => FakeLottie(props));
console.log(Lottie);
const { getByTestId,debug } = render(
<LoadingOverlay testId={TEST_ID} size="small" />
);
debug();
expect(getByTestId(TEST_ID)).to.not.equal(null);
});
});
我不确定还可以尝试什么,单元测试不是我的强项...如果有人可以提供帮助,那就太好了。
解决方法
我回答了我自己的问题...发帖以防其他人遇到同样的问题。
错误是抱怨 HTMLCanvasElement。事实证明,我试图存根的组件正在使用 Canvas 库本身,这在浏览器中运行时不是必需的,但是由于我正在构建一个测试,我只是添加了 Canvas 库添加到我的包中,问题解决了。完整代码如下:
import React from 'react';
import { render,cleanup } from '@testing-library/react';
import { expect,assert } from 'chai';
import * as lottie from 'lottie-react-web';
import { createSandbox } from 'sinon';
import LoadingOverlay from '../src/components/LoadingOverlay';
// test ID
const TEST_ID = 'the-test-id';
// mocks
const sandbox = createSandbox();
const MockLottie = () => 'Mock Lottie';
describe('Loading Overlay',() => {
beforeEach(() => {
sandbox.stub(lottie,'default').callsFake(MockLottie);
});
afterEach(() => {
sandbox.restore();
cleanup();
});
it('should have test ID',() => {
const { getByTestId } = render(
<LoadingOverlay testId={TEST_ID} size="medium" />
);
expect(getByTestId(TEST_ID)).to.not.equal(null);
});
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。