Question

我定义了一些反应成分：

的src / hello.jsx

import React from 'react';
import Box from './box.jsx';

class Hello extends React.Component {
  render() {
    const {fruit} = this.props;
    return <div>
      <h1>Hello, I like:</h1>
      {
        fruit.map((name, index) => <Box name={name} key={index}/>)
      }
    </div>
  }
}

export default Hello;

的src / box.jsx

import React from 'react';

export default class Box extends React.Component {
  render() {
    const {name} = this.props;
    return <div>Box: {name}</div>
  }
}

并使用enzyme对其进行测试：

规格/你好-spec.js

import React from 'react';
import Hello from '../src/hello.jsx';
import chai from 'chai';
import spies  from 'chai-spies';
import {mount} from 'enzyme';
import jsdomGlobal from 'jsdom-global';

jsdomGlobal();

chai.should();

describe('<Hello />', () => {

  it('shows names in inner components', () => {
    const wrapper = mount(<Hello fruit={['AAA', 'BBB']}/>);
    // AAA will be rendered by inner components
    wrapper.contains("AAA").should.be.true;
  });

});

运行测试：

mocha --compilers js:babel-core/register --recursive spec

但测试总是失败。

如果我自己验证Hello组件中的文字，例如：

wrapper.contains("Hello, I like:").should.be.true;

它将通过。

这是预期的行为吗？如何测试内部组件的文本？

Answer 1

可能代之以wrapper.text().to.have.string('AAA');？

为什么酶`mount`无法在内部组件中找到文本？

1 个答案: