关于'react-aad-msal'包的测试错误

Question

我在名为Authorizer的组件中使用react-aad-msal包，当我运行测试时，我收到以下错误：

SyntaxError：意外的令牌

从'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>
    );
  });
});