Jest并没有改变我们构建的设计系统包

tpxzln5u  于 11个月前  发布在  Jest
关注(0)|答案(1)|浏览(112)

我们一直在构建我们公司的设计系统。我们使用Material UI作为基础。应用程序和设计系统工作正常,但我们有一个小问题Jest。当运行测试时,我们得到以下错误:

❯ npx jest                                                         ⏎
 FAIL  src/App.test.tsx
  ● Test suite failed to run

    Jest encountered an unexpected token

    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

    By default "node_modules" folder is ignored by transformers.

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
     • If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/configuration
    For information about custom transformations, see:
    https://jestjs.io/docs/code-transformation

    Details:

    /Users/antoniogamizdelgado/badger/minimal-example/frontends/design-system/dist/main.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import $681qW$styledcomponents from "styled-components";
                                                                                      ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      1 | import * as React from 'react';
    > 2 | import {Tab} from "design-system";
        | ^
      3 | import {render} from "@testing-library/react";
      4 |
      5 |

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1505:14)
      at Object.<anonymous> (src/App.test.tsx:2:1)

字符串
幸运的是,我们已经能够创建一个最小的例子来重现这个问题,你可以在这里找到它-> https://github.com/antoniogamizbadger/minimal-example/tree/minimal-example-material
复制它的过程是:

npm ci
npm run build


从软件包目录:

npm ci
npx jest


我们有更多的文件使用导入,所以不知道为什么我们已经设置的transformer不工作。有什么想法如何修复配置?

vaj7vani

vaj7vani1#

这是因为默认情况下Jest不会通过transformers运行node_modules中的任何东西。这通常是一个安全的假设,因为第三方dep通常已经以这样一种方式进行了编译,即当从NPM下载包时,CommonJS版本就在tarball中(Jest默认需要)。
但是,当你有一些内部模块,你没有真正发布,并希望从源代码构建方便,而不是有多个构建步骤的依赖包,这听起来像你的情况。值得注意的是,虽然这种做法并不是真正的最佳实践,因为它意味着模块没有被完美地封装,因为它的构建步骤在概念上属于另一个模块--但我承认我也这样做👀,你确实经常在企业项目中看到它。另一种选择通常被认为是太多的苦差事,让多个构建监视过程在几个包中运行,以进行本地开发。
你可以让Jest编译这个模块。把它添加到你的"jest"配置包模块package.json中。这将使所有的东西都转换,除了node_modules中任何不是design-system的模块。

"transformIgnorePatterns": [ "node_modules/(?!design-system)" ]

字符串

相关问题