javascript - Jest 快照测试 - 在 componentDidMount() 中创建新对象时发生错误

Question

我有一个组件，其根 DOM 元素是 <canvas> .我使用 componentDidMount() 方法在 Canvas 上绘制图像；但是，我使用的是第 3 方库，当测试尝试创建从该库派生的新对象时，我在测试期间收到以下错误:

TypeError: QR is not a constructor

QR是用于从中实例化对象的类的名称。这是我的组件(请注意，在运行应用程序时，没有关于 QR 对象的错误，它只在测试期间发生)。

QRCode.js:

import React, { Component } from 'react';
import * as QR from 'qrious';

export class QRCode extends Component {

    render(){
        return (
            <canvas className='QRCode'>
            </canvas>
        );
    };

    componentDidMount() {
        this.drawQRCode();
    }

    drawQRCode() {
        ...
        // the error is occuring here
        let qr = new QR({
            element: canvas,
            value: 'http://example.com/',
            size: canvasSize,
            level: 'H',
            foreground: '#2B2F2B'
        });
        ...
    }

}

QRCode.test.js:

import { QRCode } from './QRCode';
import renderer from 'react-test-renderer';

describe('QRCode', () => {

    it('renders correctly (snapshot test)', () => {
        const tree = renderer
            .create(<QRCode />)
            .toJSON();

        expect(tree).toMatchSnapshot();
    });

});

我尝试添加 import * as QR from 'qrious';到 QRCode.test.js 文件的顶部，但没有任何区别。

Answer 1

将 import * as QR from 'qrious' 替换为 import QR from 'qrious'

编辑:

由于 qrious 没有默认导出，应更改为:

从'qrious'导入{QRious}

或

从'qrious'导入{QRious as QR}