Enzyme

作者: Metoo丶淡然 | 来源:发表于2018-06-25 10:30 被阅读49次

    http://airbnb.io/enzyme/docs/api/index.html

    使用Enzyme测试React(Native)组件 http://insights.thoughtworkers.org/use-enzyme-to-test-the-react-component/

    Selector语法: https://github.com/airbnb/enzyme/blob/master/docs/api/selector.md

    yarn add enzyme --dev
    

    [已知问题 React 16 支持]

    目前最新的React Native依赖React 16 alpha, 导致现有的测试几乎全部失败. 跟踪ISSUE:

    https://github.com/airbnb/enzyme/issues/928

    官方答复3.0正式发布之后即可支持. 目前有beta版: enzyme@3.0.0-beta.5 , 经测试支持React 16.

    需要做如下升级:

    package.json中添加新的依赖:

    "babel-plugin-object-assign": "^1.2.1",
    "babel-plugin-transform-replace-object-assign": "^0.2.1",
    "babel-preset-airbnb": "^2.4.0",
    "enzyme": "^3.0.0-beta.5",
    "enzyme-adapter-react-16": "^1.0.0-beta.2",
    

    推荐执行命令来完成升级:

    npm install --save-dev enzyme@3.0.0-beta.5
    npm install --save-dev babel-plugin-transform-replace-object-assign
    npm install --save-dev babel-plugin-object-assign
    npm install --save-dev babel-preset-airbnb
    npm install --save-dev enzyme-adapter-react-16
    

    yarn add --dev enzyme@3.0.0-beta.5
    yarn add --dev babel-plugin-transform-replace-object-assign
    yarn add --dev babel-plugin-object-assign
    yarn add --dev babel-preset-airbnb
    yarn add --dev enzyme-adapter-react-16
    

    一份完整的列表如下:

    "devDependencies": {
      "babel-jest": "*",
      "babel-plugin-object-assign": "^1.2.1",
      "babel-plugin-transform-replace-object-assign": "^0.2.1",
      "babel-plugin-transform-runtime": "*",
      "babel-preset-env": "*",
      "babel-preset-react-native": "1.9.1",
      "babel-preset-airbnb": "^2.4.0",
      "coveralls": "^2.13.0",
      "cz-conventional-changelog": "^2.0.0",
      "enzyme": "^3.0.0-beta.5",
      "enzyme-adapter-react-16": "^1.0.0-beta.2",
      "fetch-mock": "^5.12.2",
      "istanbul": "^0.4.5",
      "jest": "*",
      "react-addons-test-utils": "16.0.0-alpha.3",
      "react-dom": "16.0.0-alpha.12",
      "react-test-renderer": "16.0.0-alpha.12"
    }
    

    然后每个测试中需要设置React的Adapter, 建议写入setupFiles中:

    import Enzyme from 'enzyme';
    import Adapter from 'enzyme-adapter-react-16';// React 15 需要修改对应版本
    
    Enzyme.configure({ adapter: new Adapter() });
    

    这样就可以继续进行Enzyme测试了.

    参考资料:

    https://github.com/airbnb/enzyme/blob/master/packages/enzyme-test-suite/test/_helpers/setupAdapters.js

    []

    相关文章

      网友评论

          本文标题:Enzyme

          本文链接:https://www.haomeiwen.com/subject/nwixyftx.html