0

我想在柏树中使用酶柴。我的源代码看起来像这样 ProductList

import React from 'react'
import Product from './Product'
export default class ProductList extends React.Component {
   render() { return (<div className = 'ui unstackable items'>
     <Product />
   </div>);
    }
  }

产品

import React from 'react'
export default class Product extends React.Component {
  render () {
    return (
      <div className = 'item'>
        <div className = 'image'>
          <img src="../images/Banana-Snowboard.png" alt="Snow Board" ></img>
        </div>
        <div className = 'middel aligned content'>
          <div className = 'description'>
            <a>Snow Board</a>
            <p>Cool Snow Board</p>
          </div>
          <div className = 'extra'>
            <span>Submitted by:</span>
            <img className = 'ui avatar image' src= './images/avatar.png' alt="Avatar"></img>
          </div>
        </div>
      </div>
    )
  }
}

测试看起来像这样

import React from 'react';
import ReactDOM from 'react-dom';
import Enzyme from 'enzyme';
import { configure, mount,shallow } from 'enzyme'
import chaiEnzyme from 'chai-enzyme'
import chai from 'chai'

import ProductList from '../../src/components/ProductList';
import Product from '../../src/components/Product'
import Adapter from 'enzyme-adapter-react-16'
Enzyme.configure({ adapter: new Adapter() });
chai.use(chaiEnzyme())

function myAwesomeDebug (wrapper) {
  let html = wrapper.html()
  // do something cool with the html
  return html
}

chai.use(chaiEnzyme(myAwesomeDebug))


describe('ProductList component testing', () => {
  it('Should display one product in a productlist' , ()=> {
    const productList = mount(<ProductList />)
    expect(productList).to.be.present()
    expect(productList.find('div')).to.be.present()
    expect(productList).to.have.descendants(Product)

  });

});

配置文件如下所示：

{
  "name": "react-hello-world",
  "version": "1.0.0",
  "description": "React Hello World",
  "main": "index.js",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "cypress": "cypress open",
    "cypress:all": "cypress run --browser chrome"
  },
  "author": "CodeMix",
  "license": "ISC",
  "dependencies": {
    "react-scripts": "^1.1.1"
  },
  "devDependencies": {
    "@cypress/webpack-preprocessor": "^2.0.1",
    "ajv": "^6.5.2",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-preset-env": "^1.6.0",
    "babel-preset-react": "^6.24.1",
    "chai": "^4.1.2",
    "chai-enzyme": "^1.0.0-beta.1",
    "cheerio": "^1.0.0-rc.2",
    "css-loader": "^0.28.7",
    "cypress": "^3.0.2",
    "enzyme": "^3.3.0",
    "enzyme-adapter-react-16": "^1.1.1",
    "eslint": "^4.18.0",
    "eslint-config-standard": "^11.0.0",
    "eslint-plugin-chai-friendly": "^0.4.1",
    "eslint-plugin-cypress": "^2.0.1",
    "eslint-plugin-import": "^2.13.0",
    "eslint-plugin-node": "^6.0.1",
    "eslint-plugin-promise": "^3.8.0",
    "eslint-plugin-react": "^7.10.0",
    "eslint-plugin-standard": "^3.1.0",
    "hoek": "^5.0.3",
    "lodash": "^4.17.10",
    "react": "^16.4.1",
    "react-dom": "^16.4.1"
  },
  "peerDependencies": {
    "chai": "^3.0.0 || ^4.0.0",
    "cheerio": "0.19.x || 0.20.x || 0.22.x || ^1.0.0-0",
    "enzyme": "^2.7.0 || ^3.0.0",
    "react": "^0.14.0 || ^15.0.0-0 || ^16.0.0-0",
    "react-dom": "^0.14.0 || ^15.0.0-0 || ^16.0.0-0"
  }
}

执行测试 TypeError 时收到以下错误消息：expect(...).to.be.present is not a function 当我尝试https://github中描述的其他一些断言时收到类似的错误消息.com/producthunt/chai-enzyme#installation如何修复配置以便可以使用 chai-enzyme 断言？

4

1 回答 1

0

看起来你忘了导入期望！

import { expect } from 'chai'
于 2018-09-20T01:43:29.820 回答