Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

react-test-demo/__mocks__/ 下的文件内容是什么 #1

Open
Witee opened this issue Aug 8, 2017 · 5 comments
Open

react-test-demo/__mocks__/ 下的文件内容是什么 #1

Witee opened this issue Aug 8, 2017 · 5 comments

Comments

@Witee
Copy link

Witee commented Aug 8, 2017

react-test-demo/__mocks__/

请教下这个文件夹下两个文件的内容是什么,现在是空的。
另外有没有相关文档可以推荐下?找到的都是让写这个路径,但没有人说文件内容是什么。

@superman66
Copy link
Owner

文件内容其实无所谓的,只不过配个 mock 静态资源的路径。
我在 REAMDE.md 中有写到:

代表需要被 Mock 的资源名称。如果需要 Mock 静态资源(如less、scss等),则需要配置 Mock 的路径 <rootDir>/__mocks__/yourMock.js

作用就是用于 mock 你的组件中引用到的那些静态资源如 css、image等。
如果你的组件中引用过静态资源比如 css,在运行测试脚本的时候组件并不会真正去访问这些静态资源。所以你需要配置 mock 路径让测试脚本在 render 组件的时候,遇到需要引用静态资源的地方就去 __mock__ 文件夹下去找,这样就不会因为找不到静态资源而报错。你可以试试将将整个文件夹删掉试试,你就明白它的作用。

@superman66
Copy link
Owner

具体你可以看文档: Manual Mocks

@Witee
Copy link
Author

Witee commented Aug 9, 2017

  1. 非常感谢,这回明白了,以下是我的理解:
    使用jest测试时遇到后缀为配置的文件时不需要从远程加载,mocks 只需要指定为一个存在的文件,如文档中的 yourMock.js

  2. 还有个问题,是测试 ant-design 组件的
    我发现 moduleNameMapper 中添加

"transform": {
        "^.+\\.js$": "babel-jest"
      }

就会报错:

 FAIL  app/components/ToolTabs/__tests__/Table.test.js
  ● Test suite failed to run

    /Users/xiewt/spg/DC2017/ui-web/node_modules/antd/lib/style/index.less:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){@import "./themes/default";
                                                                                             ^
    SyntaxError: Invalid or unexpected token

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/ScriptTransformer.js:289:17)
      at Object.<anonymous> (node_modules/antd/lib/table/style/index.js:3:1)
      at Object.<anonymous> (app/components/ToolTabs/Table.js:1:179)

去掉之后报错为:

TypeError: Cannot read property 'getBoundingClientRect' of null

看网上主文档,有人说 ant-design会加载less文件什么的,但看这里mock设置了less文件的处理,之前以为是mock文件配置的问题,但现在又不知道为什么了。

@Witee
Copy link
Author

Witee commented Aug 9, 2017

"transform": {
"^.+\.js$": "babel-jest"
}

我加错位置了,目前只有

TypeError: Cannot read property 'getBoundingClientRect' of null

一个报错了

@baixiaoji
Copy link

单元测试的组件,好像并没有引入图片或是样式资源,一旦引入就会有报错。配置的moduleNameMapper字段的好像并没有什么用。
查看到解决方法是在测试文件中写入jest.mock但是官网上还没有找到过这个意思

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants