时间戳

首页 > 解决方案 > 在有状态组件中测试 Text 元素的内容

react-native - 在有状态组件中测试 Text 元素的内容

问题描述

我正在使用 react-native-testing-library。我的组件很简单：

import React, {Component} from 'react';
import {Text, View} from 'react-native';
import {information} from './core/information';

export default class Logo extends Component {
  constructor() {
    super();
    this.state = {
      name: ''
    };
    information()
      .then((details) => {
        this.setState({
          name: details['name']
        });
      })
      .catch((e) => {
        console.log(e);
      });
  }

  render() {
    return (
      <>
        <View>

          <Text>{this.state.name}</Text>

        </View>
      </>
    );
  }
}

我想确保包含正确的内容。我尝试了以下方法，但失败了：

import * as info from "./lib/information";

it('displays correct text', () => {
    const spy = jest.spyOn(info, 'information')
    const data = {'name':'name'}
    spy.mockResolvedValue(Promise.resolve(data));

    const {queryByText, debug} = render(<Logo />);
    expect(queryByText(data.name)).not.toBeNull();

    expect(spy).toHaveBeenCalled();
  });

我可以确认函数 information() 被正确监视，但仍然 debug(Logo) 显示带有空字符串的 Text 元素。

标签： react-native

解决方案

如果它是正确的间谍，你可以试试这个。我鼓励你使用testID组件的道具

  render() {
    return (
      <>
        <View>

          <Text testID="logo-text">{this.state.name}</Text>

        </View>
      </>
    );
  }

import * as info from "./lib/information";
import { waitForElement, render } from "react-native-testing-library";

it('displays correct text', () => {
    const spy = jest.spyOn(info, 'information')
    const data = {'name':'name'}
    //this is already resolving the value, no need for the promise
    spy.mockResolvedValue(data);

    const {getByTestId, debug} = render(<Logo />);
    //You better wait for the spy being called first and then checking
    expect(spy).toHaveBeenCalled();

    //Spy function involves a state update, wait for it to be updated
    await waitForElement(() => getByTestId("logo-text"));
    expect(getByTestId("logo-text").props.children).toEqual(data.name);
  });

此外，您应该将您的信息呼叫移动到componentDidMount

推荐阅读