反映问题编辑的其他信息

Question

我正在使用React Native构建应用程序，并使用Jest和Enzyme进行单元测试。如何测试percent_cols = ['col1', 'col2', 'col3'] # add the names of your actual columns here. percentage_converter = lambda x: x * 100 pd.read_excel(file, converters={percent_cols: percent_converter})的{{1}}函数？

它从React-Native-Elements库返回一个<FlatList />。

让我给您示例代码：

renderItem()

我希望能够测试<ListItem />函数。我的问题是，import { ListItem } from 'react-native-elements' export class MyList extends Component { const list = [ { name: 'Amy Farha', subtitle: 'Vice President' }, { name: 'Chris Jackson', avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg', subtitle: 'Vice Chairman' }, ... // more items ] keyExtractor = (item, index) => index renderItem = ({ item }) => ( <ListItem title={item.name} subtitle={item.subtitle} leftAvatar={{ source: item.avatar_url && { uri: item.avatar_url }, title: item.name[0] }} /> ) render () { return ( <FlatList keyExtractor={this.keyExtractor} data={this.state.dataSource} renderItem={this.renderItem} /> ) } }返回错误：renderItem()。让我给您我编写的测试代码：

wrapper.instance().renderItem({item: item})

我该如何编写此测试，以便可以测试该函数是否正确呈现了TypeError: wrapper.instance(...).renderItem(...).find is not a function？

Answer 1

您可以使用react-native-testing-library来测试FlatList

这里是例子：

组件：

const Item = ({ name ) => <Text>{name}</Text>

class LisItem extends React.Component {
  _keyExtractor = (item: { id: string }) => item.id

  render() {
    return (
      <View style={styles.container}>
        {todos && (
          <FlatList
            data={this.props.todos}
            keyExtractor={this._keyExtractor}
            renderItem={({ item: { id, name } }) => (
              <Item
                key={id}
                name={name}
              />
            )}
          />
        )}
      </View>
    )
  }
}

单元测试：

import { render } from 'react-native-testing-library'

const mockDataTodos = [
  {
    id: 'id-1',
    name: 'Todo-1',
  },
  {
    id: 'id-2',
    name: 'Todo-2',
  },
  {
    id: 'id-3',
    name: 'Todo-3',
  },
]

describe('Testing FlatList', () => {
    test('Error component should be render when error is true', () => {
      const componentTree = render(
        <ListItem todos={mockDataTodos} />,
      )

      expect(componentTree.getAllByType(FlatList).length).toBe(1)
      expect(componentTree.getAllByType(Item).length).toBe(mockDataTodos.length)
    })
})

希望获得帮助！

Answer 2

您还可以使用renderProp函数进行测试。

const wrapper = shallow(<YourComponent {...defaultProps} />);
const flatList = wrapper.find('FlatList');

const item = flatList.renderProp('renderItem')({ item: yourData });
expect(item).toMatchSnapshot();

Answer 3

renderItem()返回一个JSX元素。 JSX compiles to React.createElement() which returns an object。

因此，renderItem()的返回值只是一个对象。

您可以通过执行以下操作来测试renderItem()是否创建了正确的对象：

it("should display the order as a <ListItem />", () => {
  const element = wrapper
    .instance()
    .renderItem(item);
  expect(element.type).toBe(ListItem);
  expect(element.props).toEqual({
    title: 'Chris Jackson',
    subtitle: 'Vice Chairman',
    leftAvatar: {
      source: { uri: 'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg' },
      title: 'C'
    }
  });
});

Answer 4

因此，我不确定您是否从基于类的组件中提取了一些代码，但是renderItem本身就是一个组件。也许我可以为您提供一些测试代码，并且假设您导入了浅表并设置了item变量，则可以根据需要对其进行调整：

describe('renderItem', () => {
   it('should display as a ListItem', () => {
       const wrapper = shallow(<renderItem item={item} />);
       expect(wrapper.find(ListItem).length).toEqual(1);
   });
});

有两个与您的示例不同的关键事项。一个-我假设您已经将ListItem导入了您的测试中。然后，您可以将其直接传递到find中。第二位是您要将查找并检查长度的结果传递到expect中并测试该值。想到它是“我要测试的东西”（它可以找到的ListItem个组件的数量），然后从中创建断言（toEqual(1)）。

反映问题编辑的其他信息

在您的设置中，我不会费心直接测试renderItem。相反，我将确保对ListItem进行全面测试，然后断言关于MyList如何呈现FlatList的事情。可以使用expect(wrapper).toMatchSnapshot()完成此操作，甚至可以通过断言有关授予FlatList的道具的一些方法来做到这一点。如果您真的对所有这些事情都抱有偏执，也许可以使用mount而不是浅浅的来完全渲染它。

如何测试renderItem函数返回<listitem>？

4 个答案:

组件：

单元测试：

反映问题编辑的其他信息