關於'react-aad-msal'軟件包的笑話測試錯誤

Question

我在名為Authorizer的組件中使用react-aad-msal程序包，當我運行測試時出現以下錯誤：

語法錯誤：意外的令牌

從'react-aad-msal'導入{AzureAD，MsalAuthProviderFactory};

該測試非常基礎，刪除導入使該測試變為綠色。

describe('<Auzthorizer />', () => {
it('should load authorizer without crashing', () => {
    const wrapper = shallow(<Auzthorizer />);
});

}）;

使用“ react-aad-msal”包的代碼為：

   <AzureAD
            provider={new MsalAuthProviderFactory({
                clientID: clientId,
                scopes: ['openid'],
                authority: b2cHost,
                type: "Redirect",
                persistLoginPastSession: true
            })}
            unauthenticatedFunction={this.loginCallback}
            authenticatedFunction={this.logoutCallback}
            userInfoCallback={this.printUserInfo} />

盡管即使我從組件中刪除代碼，測試也失敗了，但是“ react-aad-msal”只是導入

---

我創建了一個虛擬組件，僅用於使用代碼進行測試：

import React, { Component } from 'react';
import {AzureAD, MsalAuthProviderFactory } from 'react-aad-msal';


class Test extends Component {

    render() {
        <div></div>
    }
}

export default Test

和一個包含以下代碼的測試文件：

import {shallow} from "enzyme";
import test from "./test";
import React from "react";


describe('<test />', () => {
    it('should load authorizer without crashing', () => {
        const wrapper = shallow(<test />);
    });
});

而且測試仍然失敗。

Answer 1

使用上面的代碼，我什至不知道它如何運行測試。 您在淺層安裝組件，但是將其保存到變量wrapper而無需對其執行任何測試。 這是如何運行簡單測試的示例。

import React from 'react';
import { shallow } from 'enzyme';
import Test from './test';

describe('Test', () => {
  it('shallow mounts', () => {
    shallow(<Test />);
  });
});

我指的是在測試文件上使用導入的意思是，如果您要掛載的組件需要特定的道具或需要由特定的組件包裝，那么您也需要將它們導入測試文件。

需要第三方“時刻”的示例

在此示例中， <Test />內部有一個使用moment的函數

import React from 'react';
import { shallow } from 'enzyme';
import Test from './test';
import moment from 'moment';

describe('Test', () => {
  it('mounts without crashing', () => {
    mount(<Test />);
  });
});

包裝組件所需的示例“ APIProvider”

import React from 'react';
import { shallow } from 'enzyme';
import Test from './test';
import { APIProvider } from './api-context';

describe('Test', () => {
  it('mounts with API Context', () => {
    mount(
      <APIProvider>
          <Test />
      </APIProvider>
    );
  });
});