bug: create-react-app 建立的molecule-demo工程不能跑jest

[xu4wang]

Describe the bug

按照

https://dtstack.github.io/molecule/zh-CN/docs/next/quick-start/

建立了 molecule-demo， 可以正常运行，并看到浏览器中的默认molecule Workbench.

但是执行 yarn test时候报错。

  ● Test suite failed to run

    Cannot find module '@dtinsight/molecule' from 'src/App.js'

    Require stack:
      src/App.js
      src/App.test.tsx

      1 | import React from 'react';
      2 | import '@dtinsight/molecule/esm/style/mo.css';
    > 3 | import { create, Workbench } from '@dtinsight/molecule';
        | ^
      4 |
      5 | const moInstance = create({
      6 |     extensions: [],

      at Resolver.resolveModule (node_modules/jest-resolve/build/resolver.js:324:11)
      at Object.<anonymous> (src/App.js:3:1)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.669 s
Ran all test suites related to changed files.

Versions

{
  "name": "molecule-demo",
  "version": "0.1.0",
  "private": true,
  "jest":{
  },
  "dependencies": {
    "@dtinsight/molecule": "^1.1.0",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.11.45",
    "@types/react": "^18.0.15",
    "@types/react-dom": "^18.0.6",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "typescript": "^4.7.4",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

[xu4wang]

@dtinsight/molecule 已经正常安装了， 并且yarn start可以正常运行。 是不是jest和cra生成的项目使用esm模块有不兼容啊？

[xu4wang]

https://jestjs.io/docs/ecmascript-modules

jest对esm的支持好像还不成熟。 大家有用jest测试包含molecule esm的项目吗？ 谢谢。

[mortalYoung]

@dtinsight/molecule 已经正常安装了， 并且yarn start可以正常运行。 是不是jest和cra生成的项目使用esm模块有不兼容啊？

是滴，因为 jest 是跑在 Node.js 的环境里的，目前 Node.js 对 esm 的支持还是实验性的功能。

如果有想要用 Molecule 测试 molecule 的话，目前理论上应该有两种办法，

1. 一种是黑盒思路，因为 Molecule 项目本身已经有足够的测试覆盖率，所以确保你自身项目的代码测试通过即可，Molecule 用到的 API 部分都通过 mock 实现，这是 Taier 中的实现。
2. 另一种思路是 jest 编译项目代码成 cmj 然后测试的时候，要求其继续编译 node_modules 下的代码（默认行为是忽略的），这种思路目前我还没有实践上的 demo，有具体的 demo 我后续通过这个 issue 继续同步

[xu4wang]

如果用上面黑盒思路，请问有没有对extension做单元测试的例子？

理论上，对extension中用到的molecule相关控件的配置方法，以及各种on开头的事件回调函数都需要mock。 感觉要mock的地方不少，不是很容易写。

https://github.com/DTStack/Taier/tree/master/taier-ui/src/extensions 尝试在👆找一些extension测试的参考，没有找到。 demo里面也没看到测试用例。

一般写extension时候，最佳实践是什么样的？

如果不能比较方便的单元测试，对于刚上手的新人，是不是需要频繁在浏览器里面看console试错来熟悉api。

[mortalYoung]

目前来说暂时没有最佳实践，针对 extensions 中的部分实现可以抽一个纯函数出来进行测试，但是大部分控件的配置方法暂时没什么特别好的办法，后面我们考虑这一块的内容

[mortalYoung]

如果不能比较方便的单元测试，对于刚上手的新人，是不是需要频繁在浏览器里面看console试错来熟悉api。

其实不用，如果是 ts 的项目，那在 IDE 里面会有提示的，我们所有的函数都有补充文字说明，参数的命名还是比较符合规范的。 除此之外，还可以查 API 文档，所有 API 的风格也是保持统一，确保用户的上手

[xu4wang]

目前来说暂时没有最佳实践，针对 extensions 中的部分实现可以抽一个纯函数出来进行测试，但是大部分控件的配置方法暂时没什么特别好的办法，后面我们考虑这一块的内容

我是新手，刚开始入门，考虑直接在molecule里面来写extension 这样测试方便一些。

熟悉后再切回自己的工程里面。