開玩笑的快照測試-在componentDidMount（）中創建新對象時發生錯誤

Question

我有一個組件，其根DOM元素是<canvas> 。 我使用componentDidMount（）方法在畫布上繪制圖像； 但是，我使用的是第三方庫，當測試嘗試創建從該庫派生的新對象時， 在測試期間收到以下錯誤 ：

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';添加import * as QR from 'qrious'; 到QRCode.test.js文件的頂部，但這沒什么區別。

Answer 1

更換import * as QR from 'qrious'與import QR from 'qrious'

編輯：

由於qrious沒有默認導出，因此應更改為：

import { QRious } from 'qrious'

要么

import { QRious as QR } from 'qrious'