使用React Native的酶的浅（）。text（）不能像我预期的那样工作

Question

我正在尝试围绕具有enzyme和react-native-mock的React Native测试获得一些基本的理解。

下面没有包含：mocha的自定义编译器可以获得良好的性能。

我的代码如下：

Block.jsx：

import React from 'react';
import {View} from 'react-native';

export default ({title, ui}) => (
  <View>
    Title: {title}
  </View>
);

Block.test.js

import { shallow } from 'enzyme';
import { expect } from 'chai';
import {Block} from '../';
import React from 'react';

describe('<Block /> with props: title', () => {

  it('should have correct props', () => {
    expect(
      shallow(<Block title="Something" />).props()
    ).to.deep.equal( {title:"Something"} );
  });

  it('should have correct title', () => {
    expect(
      shallow(<Block title="Something" />).text()
    ).to.equal( "Something" );
  });

});

测试结果

Mocha命令：

mocha --compilers js:./test/support/compiler.js --require react-native-mock/mock --recursive **/test/*.test.js --watch

摩卡测试结果：

  <Block /> with props: title
    1) should have correct props
    2) should have correct title

  2 failing

  1) <Block /> with props: title should have correct props <Text />:

      AssertionError: expected { Object (children) } to equal { title: 'Something' }
      + expected - actual

       {
      -  "children": [
      -    "Title: "
      -    "Something"
      -  ]
      +  "title": "Something"
       }

      at Context.<anonymous> (components/test/Block.test.js:24:120)

  2) <Block /> with props: title should have correct title <Text />:

      AssertionError: expected '<View />' to equal 'Something'
      + expected - actual

      -<View />
      +Something

      at Context.<anonymous> (components/test/Block.test.js:28:119)

意外行为

1. props()似乎获得了正确的值，但格式与api所描述的格式不同
2. text()不会呈现节点textContent，而是呈现字符串标记“<View />”

替代方案：props（）。children

鉴于组件：

import React from 'react';
import {View, Text} from 'react-native';

export default ({title, ui}) => (
  <View>
    <Text> The title...</Text>
    {title}
  </View>
);

props().children是数组[<Text component instance>, "Something"]

所以跟随测试通过：

  it('should have correct props', () => {
    expect(
      shallow(<Block title="Something" />).props().children
    ).to.contain( "Something" );
  });

问题

为什么Enzyme API的行为与文档中描述的不同？

专门查看文档shallow(<Block title="Something" />).text()应该等于某些，例如：The title...Something

我做错了什么，还是我正在使用的技术？

编辑1：其他问题

html()，render()，update()似乎也无法使用我的设置

编辑：React原生文件仅适用于shallow at the moment

Answer 1

解决方案1：textContent

的解决方案

来自Enzyme示例应用程序：

const title = "Blah";
const wrapper = shallow(<Block title={title} />);
expect(wrapper.length).to.equal(1);
expect(wrapper.contains(<Text>{title}</Text>)).to.equal(true);

解决方案2：更多语义

下面的替代：道具（）。儿童的语义版本更多。这Github discussion也有帮助。

Block.js：

import React from 'react';
import {View, Text} from 'react-native';

export default ({title, ui}) => (
  <View>
    <Text data={title}>{title}</Text>
  </View>
);

Block.test.js：

  it('should have correct props', () => {
    const title = title;
    expect(
      shallow(<Block title={title} />)
         .find('Text') // Use selector to get certain children
         .first() // Get the first child
         .props() // Get its props
         .data
    ).to.equal(title)
  });

Answer 2

1. 您可以参考您想要测试的具体道具：

   expect( shallow(<Block title="Something" />).prop('title') ).to.equal( "Something" );

2. text()没有做你在想的事情。看看文档中的第二个示例，浅层不会呈现您的<View>标记

Answer 3

另一种解决方案（非常类似于props().children）是访问prop中的子对象

  it('should have correct props', () => {
    expect(
      shallow(<Block title="Something" />).prop('children')
    ).toBe( "Something" );
  });

Answer 4

您可以使用{ "response": { "status": "SUCCESS", "calls": "4929" }, "person": [ { "id": "MI_SEX_65879", "full_name": "Lynn Francis Wilkinson", "dob": "05/14/1953", "race": "White", "sex": "M", "height": "507", "weight": "210lbs", "hair": "Brown", "eyes": "Blue", "address": "714 Howard St Bay City MI 48708", "crime": "750 520c1a Criminal Sexual Conduct Second Degree Person Under Thirteen ", "personal": "Lynn Wilkinson ", "image": "https://datadoesit.com/SOR-Images/MI/5011822-2018864.jpg", "state": "MI", "state_name": "Michigan", "db": "SEX" } ], "totals": { "count": "1", "sor_count": "1", "doc_count": "0", "court_count": "0" } } 技巧