反应15.5.4酶浅和安装不起作用

时间：2017-07-11 18:40:49

标签： reactjs react-redux enzyme

我试图测试我的<Header />组件，但似乎shallow和mount无效。我在react v15.5.0中看到有一些更新，但我并不了解如何使我的测试工作。

我正在使用"react": "^15.5.4",和"enzyme": "^2.9.1",。如果未调用shallow或mount，则一切正常。还尝试安装"react-test-renderer": "^15.6.1",。

import React from 'react';
import { expect } from 'chai';
import { shallow } from 'enzyme';
import Header from '../../../components/header/Header';

describe('<Header />', () => {
  it('should be correct', () => {
    const props = {
      attendant: {
        id: 1,
        first_name: 'firstName',
        last_name: 'lastName',
      },
    };

    const wrapper = shallow(<Header {...props} />);
    console.log(wrapper);
    expect(0).eql(0);
  });
});

记录错误：

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in.
/Users/gtmiyabe/Documents/contactto-master-frontend/node_modules/react-test-renderer/lib/shallow/ReactCompositeComponent.js:305
        return Component(publicProps, publicContext, updateQueue);
               ^

TypeError: Component is not a function
    at /Users/gtmiyabe/Documents/contactto-master-frontend/node_modules/react-test-renderer/lib/shallow/ReactCompositeComponent.js:305:16
    at measureLifeCyclePerf (/Users/gtmiyabe/Documents/contactto-master-frontend/node_modules/react-test-renderer/lib/shallow/ReactCompositeComponent.js:75:12)
    at ShallowComponentWrapper._constructComponentWithoutOwner (/Users/gtmiyabe/Documents/contactto-master-frontend/node_modules/react-test-renderer/lib/shallow/ReactCompositeComponent.js:304:14)
    at ShallowComponentWrapper.mountComponent (/Users/gtmiyabe/Documents/contactto-master-frontend/node_modules/react-test-renderer/lib/shallow/ReactCompositeComponent.js:187:21)
    at Object.mountComponent (/Users/gtmiyabe/Documents/contactto-master-frontend/node_modules/react-test-renderer/lib/shallow/ReactReconciler.js:45:35)
    at ReactShallowRenderer._render (/Users/gtmiyabe/Documents/contactto-master-frontend/node_modules/react-test-renderer/lib/shallow/ReactShallowRenderer.js:138:23)
    at _batchedRender (/Users/gtmiyabe/Documents/contactto-master-frontend/node_modules/react-test-renderer/lib/shallow/ReactShallowRenderer.js:85:12)
    at Object.batchedUpdates (/Users/gtmiyabe/Documents/contactto-master-frontend/node_modules/react-test-renderer/lib/shallow/ReactDefaultBatchingStrategy.js:60:14)
    at Object.batchedUpdates (/Users/gtmiyabe/Documents/contactto-master-frontend/node_modules/react-test-renderer/lib/shallow/ReactUpdates.js:97:27)
    at ReactShallowRenderer.render (/Users/gtmiyabe/Documents/contactto-master-frontend/node_modules/react-test-renderer/lib/shallow/ReactShallowRenderer.js:112:18)
    at ReactShallowRenderer.render (/Users/gtmiyabe/Documents/contactto-master-frontend/node_modules/enzyme/build/react-compat.js:171:37)
    at /Users/gtmiyabe/Documents/contactto-master-frontend/node_modules/enzyme/build/ShallowWrapper.js:128:26
    at ReactDefaultBatchingStrategyTransaction.perform (/Users/gtmiyabe/Documents/contactto-master-frontend/node_modules/react-test-renderer/lib/shallow/Transaction.js:143:20)
    at Object.batchedUpdates (/Users/gtmiyabe/Documents/contactto-master-frontend/node_modules/react-test-renderer/lib/shallow/ReactDefaultBatchingStrategy.js:62:26)
    at Object.batchedUpdates (/Users/gtmiyabe/Documents/contactto-master-frontend/node_modules/react-test-renderer/lib/shallow/ReactUpdates.js:97:27)
    at ReactShallowRenderer.unstable_batchedUpdates (/Users/gtmiyabe/Documents/contactto-master-frontend/node_modules/react-test-renderer/lib/shallow/ReactShallowRenderer.js:130:25)
    at performBatchedUpdates (/Users/gtmiyabe/Documents/contactto-master-frontend/node_modules/enzyme/build/ShallowWrapper.js:103:21)
    at /Users/gtmiyabe/Documents/contactto-master-frontend/node_modules/enzyme/build/ShallowWrapper.js:127:9
    at withSetStateAllowed (/Users/gtmiyabe/Documents/contactto-master-frontend/node_modules/enzyme/build/Utils.js:284:3)
    at new ShallowWrapper (/Users/gtmiyabe/Documents/contactto-master-frontend/node_modules/enzyme/build/ShallowWrapper.js:126:38)
    at shallow (/Users/gtmiyabe/Documents/contactto-master-frontend/node_modules/enzyme/build/shallow.js:19:10)
    at Suite.<anonymous> (/Users/gtmiyabe/Documents/contactto-master-frontend/app/test/components/header/Header.test.js:17:21)
    at Object.create (/Users/gtmiyabe/Documents/contactto-master-frontend/node_modules/mocha/lib/interfaces/common.js:114:19)
    at context.describe.context.context (/Users/gtmiyabe/Documents/contactto-master-frontend/node_modules/mocha/lib/interfaces/bdd.js:44:27)
    at Suite.<anonymous> (/Users/gtmiyabe/Documents/contactto-master-frontend/app/test/components/header/Header.test.js:7:3)
    at Object.create (/Users/gtmiyabe/Documents/contactto-master-frontend/node_modules/mocha/lib/interfaces/common.js:114:19)
    at context.describe.context.context (/Users/gtmiyabe/Documents/contactto-master-frontend/node_modules/mocha/lib/interfaces/bdd.js:44:27)
    at Object.<anonymous> (/Users/gtmiyabe/Documents/contactto-master-frontend/app/test/components/header/Header.test.js:6:1)
    at Module._compile (module.js:569:30)
    at loader (/Users/gtmiyabe/Documents/contactto-master-frontend/node_modules/babel-register/lib/node.js:144:5)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/gtmiyabe/Documents/contactto-master-frontend/node_modules/babel-register/lib/node.js:154:7)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
    at Module.require (module.js:513:17)
    at require (internal/module.js:11:18)
    at /Users/gtmiyabe/Documents/contactto-master-frontend/node_modules/mocha/lib/mocha.js:230:27
    at Array.forEach (native)
    at Mocha.loadFiles (/Users/gtmiyabe/Documents/contactto-master-frontend/node_modules/mocha/lib/mocha.js:227:14)
    at Mocha.run (/Users/gtmiyabe/Documents/contactto-master-frontend/node_modules/mocha/lib/mocha.js:495:10)
    at Object.<anonymous> (/Users/gtmiyabe/Documents/contactto-master-frontend/node_modules/mocha/bin/_mocha:469:18)
    at Module._compile (module.js:569:30)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
    at Function.Module.runMain (module.js:605:10)
    at startup (bootstrap_node.js:158:16)
    at bootstrap_node.js:575:3
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! contactto-master@1.0.0 test: `mocha --require ignore-styles --require mock-local-storage ./testSetup.js "./app/test/**/*.test.js"`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the contactto-master@1.0.0 test script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/gtmiyabe/.npm/_logs/2017-07-11T18_45_30_025Z-debug.log

部首：

import React from 'react';
import PropTypes from 'prop-types';
import style from './Header.scss';
import User from '../user/User';

const Header = ({ attendant }) => (
  <div className={style.wrapper}>
    <header />
    {attendant &&
      <User
        attendant={attendant}
      />
    }
  </div>
);

Header.propTypes = {
  attendant: PropTypes.shape({
    id: PropTypes.number,
    first_name: PropTypes.string,
    last_name: PropTypes.string,
  }).isRequired,
};

export default Header;

1 个答案:

答案 0 :(得分：1)

您正在尝试渲染无效的反应组件。很难说为什么，但看起来Header变量不是有效的反应组件。你的代码看起来没问题，测试应该有效，所以看起来问题就是导入/导出。

您可以尝试这只是为了测试

describe('<Header />', () => {
  describe('should be correct', () => {
    const props = {
      attendant: {
        id: 1,
        first_name: 'firstName',
        last_name: 'lastName',
      },
    };

    const wrapper = shallow(<Header.default {...props} />); // Header is an object so probably it has default property...
    console.log(wrapper);
    expect(0).eql(0);
  });
});

  1. 安装缺失的依赖项，如果它尚未安装

    npm install --save babel-core

  2. 在test

    中更改命令package.json 
    test: `mocha --require ignore-styles --require mock-local-storage ./testSetup.js "./app/test/**/*.test.js"`

    到

    test: `mocha —-compilers js:babel-core/register --require ignore-styles --require mock-local-storage ./testSetup.js "./app/test/**/*.test.js"`

    3. 我认为您忘记了mocha使用babel的工具。

相关问题
最新问题