TypeError:(0,_expect2.default)(...)。toBeDefined不是函数

时间:2017-05-30 14:41:55

标签: javascript reactjs unit-testing jestjs enzyme

我得到TypeError: (0 , _expect2.default)(...).toBeDefined is not a function,通常的解决方法是更改​​/'node_modules'/不使用引号。这没有任何帮助。输出是

$ jest
 FAIL  __tests__/test_fake_add_component.js
  ● Add fake tests › Add › Add requires onAdd prop

    TypeError: (0 , _expect2.default)(...).toBeDefined is not a function

      at Object.<anonymous> (__tests__/test_fake_add_component.js:20:54)
      at process._tickCallback (internal/process/next_tick.js:109:7)

  ● Add fake tests › Add › Add renders button

    TypeError: (0 , _expect2.default)(...).toBeDefined is not a function

      at Object.<anonymous> (__tests__/test_fake_add_component.js:25:43)
      at process._tickCallback (internal/process/next_tick.js:109:7)

 PASS  __tests__/test_BasicAnchorTag_enzyme.js
 PASS  __tests__/test_fake_list_component.js
 PASS  __tests__/test_hello_world_snapshot.js

Test Suites: 1 failed, 3 passed, 4 total
Tests:       2 failed, 6 passed, 8 total
Snapshots:   1 passed, 1 total
Time:        2.512s
Ran all test suites.

Add.js

import React, { Component } from 'react';


export default class Add extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        name: ''
      };
      this.handleAdd = this.handleAdd.bind(this);
    }

    handleAdd(e) {
        e.preventDefault();
        this.props.onAdd(this.state.name);
    }

    render() {
      return (
        <form>
          <input
            type="text"
            name="name"
            value={this.state.name}
            onChange={e => this.setState({ name: e.target.value })}
          >
          </input>
          <button onClick={this.handleAdd}>Add</button>
        </form>
      );
    }
}

test_fake_add_component.js

import React from 'react';
import expect from 'expect';
import { shallow, mount } from 'enzyme';

import Add from '../client/components/fake/Add';


describe('Add fake tests', () => {

    describe('Add', () => {
        let add;
        let onAdd;

        beforeEach(() => {
            onAdd = jest.fn();
            add = mount(<Add onAdd={onAdd} />);
        });

        it('Add requires onAdd prop', () => {
            expect(add.props().onAdd).toBeDefined();
        });

        it('Add renders button', () => {
            const button = add.find('button').first();
            expect(button).toBeDefined();
        });


    });
});

webpack.config.dev.js

var webpack = require('webpack');

module.exports = {
  //devtool: 'inline-source-map',
  entry: [
    'webpack-hot-middleware/client',
    './client/main.js'
  ],
  output: {
    path: require("path").resolve('./assets'),
    filename: 'bundle.js',
    publicPath: '/'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ],
  externals: {
      jquery: 'var jQuery'
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['react', 'es2015', 'react-hmre'],
          plugins: ['transform-decorators-legacy']
        }
      },
      {
          include: /\.json$/,
          loader: 'json-loader'
      },
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader',
        exclude: /node_modules/
      },
      {
        test: /\.scss$/,
        loader: 'style-loader!css-loader!sass-loader',
        exclude: /node_modules/
      }
    ]
  }
};

webpack.config.js

var webpack = require('webpack');
var path = require('path');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var copyAssets = new CopyWebpackPlugin([{from: './assets'}]);

module.exports = {
  //devtool: 'inline-source-map',
  entry: './client/main.js',
  output: {
    path: path.resolve('./assets'),
    filename: 'bundle.js',
    publicPath: '/'
  },
  plugins: [copyAssets],
  externals: {
      jquery: 'var jQuery'
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['react', 'es2015'],
          plugins: ['transform-decorators-legacy']
        }
      },
      {
        include: /\.json$/,
        loader: 'json-loader'
      },
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader',
        exclude: /node_modules/
      },
      {
        test: /\.scss$/,
        loader: 'style-loader!css-loader!sass-loader',
        exclude: /node_modules/
      }
    ]
  }
};

我不知道它使用哪一个,我只是运行jest

.babelrc

{
  "plugins": ["transform-object-rest-spread"],
  "presets": ["es2015", "react"]
}

{
  "name": "my-portal",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "python app.py",
    "devserver": "webpack-dev-server"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.4.5",
    "babel-jest": "^20.0.3",
    "babel-loader": "^6.2.1",
    "babel-plugin-transform-object-rest-spread": "^6.22.0",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "babel-preset-react-hmre": "^1.1.1",
    "coffee-loader": "^0.7.3",
    "coffeescript": "^1.12.6",
    "css-loader": "^0.28.0",
    "enzyme": "^2.8.2",
    "expect": "^1.20.2",
    "jest": "^20.0.4",
    "morgan": "^1.7.0",
    "node-sass": "^4.5.2",
    "react-addons-test-utils": "^15.5.1",
    "react-test-renderer": "^15.5.4",
    "sass-loader": "^6.0.3",
    "style-loader": "^0.16.1",
    "webpack": "^2.0.0",
    "webpack-dev-middleware": "^1.9.0",
    "webpack-dev-server": "^1.16.2",
    "webpack-hot-middleware": "^2.15.0"
  },
  "dependencies": {
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-polyfill": "^6.23.0",
    "body-parser": "^1.16.0",
    "bootstrap-daterangepicker": "^2.1.25",
    "clipboard": "^1.6.1",
    "copy-webpack-plugin": "^4.0.1",
    "dotenv": "^4.0.0",
    "express": "^4.14.0",
    "fs": "0.0.1-security",
    "highcharts": "^5.0.10",
    "json-loader": "^0.5.4",
    "moment": "^2.17.1",
    "moment-timezone": "^0.5.11",
    "morgan": "^1.7.0",
    "path": "^0.12.7",
    "prop-types": "^15.5.8",
    "react": "^15.4.0",
    "react-addons-test-utils": "^15.4.0",
    "react-bootstrap": "^0.30.7",
    "react-bootstrap-datetimerangepicker": "^2.0.3",
    "react-bootstrap-modal": "^3.0.1",
    "react-data-components": "^1.1.0",
    "react-dom": "^15.4.0",
    "react-redux": "^5.0.2",
    "react-router": "^3.0.2",
    "react-simpletabs": "^0.7.0",
    "react-tabs": "^0.8.2",
    "redux": "^3.6.0",
    "redux-logger": "^2.8.1",
    "redux-promise-middleware": "^4.2.0",
    "redux-sequence-action": "^0.2.1",
    "redux-thunk": "^2.2.0",
    "sendgrid": "^5.0.1",
    "underscore": "^1.8.3",
    "whatwg-fetch": "^2.0.2"
  }
}

1 个答案:

答案 0 :(得分:5)

你可能正在阅读jest docs而你正在使用expect ...最简单的解决方案可能只是删除import expect from 'expect';如果你打算使用jest - 或者你想要要使用expect,请查看toExist()函数。

希望它有所帮助。