帶有 React Native 的 Enzyme 的淺 ().text() 沒有按我預期的那樣工作

Question

我試圖對帶有酶和react-native-mock 的React Native 測試有一些基本的了解。

下面不包括：用於 mocha 的自定義編譯器以獲得 babel 優點。

我的代碼如下：

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 --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()似乎也不適用於我的設置

編輯：陣營與本地唯一的作品shallow 的那一刻

Answer 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：更多語義

好的，上面的Alternative: props().children 的語義版本在下面。 這個Github 討論也有幫助。

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()沒有做你在這里想的事情。 看看文檔中的第二個例子，shallow 不會渲染出你的<View>標簽

Answer 3

另一種解決方案（與props().children非常相似）是訪問 props 中的 children

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

Answer 4

你可以使用expect(wrapper.find(Foo).render().text()).to.equal('Hello World')技巧