molecule
molecule copied to clipboard
bug: create-react-app 建立的molecule-demo工程不能跑jest
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"
]
}
}
![image](https://user-images.githubusercontent.com/311397/179981835-22ba1d1b-2381-4a54-9a25-9e1c4f103020.png)
@dtinsight/molecule 已经正常安装了, 并且yarn start可以正常运行。 是不是jest和cra生成的项目使用esm模块有不兼容啊?
https://jestjs.io/docs/ecmascript-modules
jest对esm的支持好像还不成熟。 大家有用jest测试包含molecule esm的项目吗? 谢谢。
![]()
@dtinsight/molecule 已经正常安装了, 并且yarn start可以正常运行。 是不是jest和cra生成的项目使用esm模块有不兼容啊?
是滴,因为 jest 是跑在 Node.js 的环境里的,目前 Node.js 对 esm 的支持还是实验性的功能。
如果有想要用 Molecule 测试 molecule 的话,目前理论上应该有两种办法,
- 一种是黑盒思路,因为 Molecule 项目本身已经有足够的测试覆盖率,所以确保你自身项目的代码测试通过即可,Molecule 用到的 API 部分都通过 mock 实现,这是 Taier 中的实现。
- 另一种思路是 jest 编译项目代码成 cmj 然后测试的时候,要求其继续编译 node_modules 下的代码(默认行为是忽略的),这种思路目前我还没有实践上的 demo,有具体的 demo 我后续通过这个 issue 继续同步
如果用上面黑盒思路,请问有没有对extension做单元测试的例子?
理论上,对extension中用到的molecule相关控件的配置方法,以及各种on开头的事件回调函数都需要mock。 感觉要mock的地方不少,不是很容易写。
https://github.com/DTStack/Taier/tree/master/taier-ui/src/extensions 尝试在👆找一些extension测试的参考,没有找到。 demo里面也没看到测试用例。
一般写extension时候,最佳实践是什么样的?
如果不能比较方便的单元测试,对于刚上手的新人,是不是需要频繁在浏览器里面看console试错来熟悉api。
目前来说暂时没有最佳实践,针对 extensions 中的部分实现可以抽一个纯函数出来进行测试,但是大部分控件的配置方法暂时没什么特别好的办法,后面我们考虑这一块的内容
如果不能比较方便的单元测试,对于刚上手的新人,是不是需要频繁在浏览器里面看console试错来熟悉api。
其实不用,如果是 ts 的项目,那在 IDE 里面会有提示的,我们所有的函数都有补充文字说明,参数的命名还是比较符合规范的。 除此之外,还可以查 API 文档,所有 API 的风格也是保持统一,确保用户的上手
目前来说暂时没有最佳实践,针对 extensions 中的部分实现可以抽一个纯函数出来进行测试,但是大部分控件的配置方法暂时没什么特别好的办法,后面我们考虑这一块的内容
我是新手,刚开始入门,考虑直接在molecule里面来写extension 这样测试方便一些。
熟悉后再切回自己的工程里面。