Ant-design-mobile: mocha+enzyme+webpack 测试antd-mobile组件，出现找不到组件css的错误

[eastling]

本地环境

• antd-mobile 版本：0.9.10
• 浏览器 (或标明是 react-native) 及其版本：chrome最新版
• 运行环境及其版本：Mac, node最新版

你做了什么？

• 用mocha和enzyme测试Tabs组件

• 测试代码：

  import React from 'react'
  import { expect } from 'chai'
  import { shallow } from 'enzyme'
  import { Tabs } from 'antd-mobile'

  describe ("enzyme example", function() {
    it ("use Tabs component", function() {
      const wrapper = shallow(<Tabs />)
      expect(wrapper.find('.foo')).to.have.length(0)
    })
  })

• 启动运行：
  mocha test/.setup.js test/*/-test.js

你期待的结果是：

• 测试通过

实际上的结果：

• Error: Cannot find module 'antd-mobile/lib/tabs/style/css'

备注

1. Tabs组件在项目中是可以正常引入，不会出现找不到css问题。只有在mocha命令下才会出现
2. 将Tabs组件的引入方式改成 import Tabs from 'antd-mobile/lib/tabs', 出现以下错误
   

[warmhug]

确认下使用了 babel-plugin-import

[eastling]

@warmhug 使用了，组件都可以正常引用。还需提供什么信息？

[warmhug]

@sorrycc 帮忙看下

[sorrycc]

babel 没配对吧，JSX 都没解析成功。

[silentcloud]

@donnydfwx web 版本测试纯 mocha，没办法配置 webpack 的 extensions，你可以改用 https://github.com/karma-runner/karma 或者 https://github.com/ant-tool/atool-test

[zoujianliang94]

@eastling
兄弟这个问题是怎么解决的

[OPY-bbt]

@eastling 问题解决了嘛

[paranoidjk]

@silentcloud 到官方sample里面加一个业务代码测试配置的例子？

[OPY-bbt]

在package.json 中 jest中加入
"moduleFileExtensions": [
"web.js",
"js",
"jsx",
"json"
],
主要是web.js；antd-mobile 不同于 antd，以web.js结尾。

[paranoidjk]

https://github.com/ant-design/ant-design-mobile/blob/master/.jest.web.json#L2

[GZWZC]

@OPY-bbt
hello 你的意思是把mocha->转换为jest吗

[silentcloud]

@GZWZC mocha 的话，看我上面的回复

[ccicc]

https://leozdgao.me/modern-karma/ 这里有篇帖子，使用了karma可以解决