Question

我正在使用StencilJS编写一个Web组件。由我的组件导入的辅助类之一（ArrayHelper.ts）在顶部具有以下导入：

import transform from 'lodash/transform';
import isEmpty from 'lodash/isEmpty';
import isEqual from 'lodash/isEqual';
import isObject from 'lodash/isObject';

在本地编译和提供服务时，所有这些都可以正常工作。但是，在编写一些单元测试并使用jest执行它们时，jest无法正确解析这些导入：

TypeError: isObject_1.default is not a function at Function.Object. 
<anonymous>.ArrayHelper.toArray (/mycomponent/ArrayHelper.ts:15:35)

当我将ArrayHelper.ts中的导入更改为

import { isEmpty, isEqual, isObject, transform } from 'lodash';

然后Jest将成功运行测试而不会出现问题，但是stencilJS的TS编译将不再起作用：

Missing Export: mycomponents/ArrayHelper.js:5:27
'isObject' is not exported by node_modules/lodash/lodash.js

有什么想法可以在两种情况下正确实现这些导入吗？

Answer 1

尝试将其添加到您的stencil.config.js：

    <Switch>                                         
             <Route
                 path="/:lang"
                 render={(props) => {
                    if (['en', 'sv', 'fr'].includes(props.match.params.lang)) {
                        return <Master {...props}/>;
                    }

                    return <PageNotFound/>;
                }}
             />
             <Redirect exact={true} from="/" to="/en" />
             <Route path="*" component={PageNotFound} />
     </Switch>

之所以发生这种情况是因为lodash在Jest运行测试的地方不可用。这是一种实验性的浏览器技术吗？

引荐-Link1 Link2

Answer 2

尝试像这样导入lodash

import * as _ from "lodash";

开玩笑不能解决lodash导入

2 个答案: