反应 15.5.4 酶浅和安装不工作答案

【问题标题】：react 15.5.4 enzyme shallow and mount are not working反应 15.5.4 酶浅和安装不工作
【发布时间】：2017-12-15 23:22:23
【问题描述】：

我正在尝试测试我的<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;

【问题讨论】：

请在此处粘贴错误信息，现在很难说是哪里出了问题。
好的，日志消息错误（这是第一部分，我将在我的问题中发布整个日志）：警告：React.createElement：类型无效 - 需要一个字符串（用于构建-in 组件）或类/函数（用于复合组件）但得到：对象。您可能忘记从定义组件的文件中导出组件。
你能粘贴Header文件的内容吗？主要是怎么导出的？看起来组件以错误的方式导出。
是的，我现在发布了。我看到了这条消息，但我检查并尝试了其他方法，但都失败了。
只有当我将无效组件传递给浅层或挂载函数时，我才会遇到同样的错误。看起来您的测试中的 Header 不是有效的反应组件。您可以在测试中调试和检查 Header 变量的类型。根据您提供的代码，我发现唯一缺少的是使用 babel 检测 mocha（请参阅我的答案）。您可以创建一个可重现的 git 存储库，因为没有它很难提供帮助。

标签： reactjs react-redux enzyme

【解决方案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);
  });
});

如果尚未安装，请安装缺少的依赖项
```
npm install --save babel-core
```

在package.json中更改命令test

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"`

我认为您忘记了使用mocha 来使用babel。

【讨论】：

感谢您的回复，但错误仍然存在:(
部分错误是：TypeError: Cannot read property 'contextTypes' of undefined at ShallowComponentWrapper._maskContext (/Users/gtmiyabe/Documents/contactto-master-frontend/node_modules/react-test-renderer /lib/shallow/ReactCompositeComponent.js:460:33)
mocha 在我的组件中使用babel testSetup.js require('babel-register')();
我很好奇console.log(typeof Header, typeof Header.default, Header, Header.default)的输出是什么
最大的问题 (import Header from '../../../components/header/Header';) 是在同一个 header 文件夹中我有 Header.jsx 和 Header.scss。