Как проверить значение элементов в модульном тестировании React Native с использованием Enzyme (Jest)

Question

У меня есть следующий компонент Flash.js для тестирования

export default class SnapshotChild extends Component {

render() {
    return (
        <View>
            <Text>First Text</Text>
            <Text>Second Text</Text>
        </View>
    );
}}

И у меня есть тесты

describe('Flash Card', () => {
      const flash = shallow(<Flash />);

      it('test the `<Text/>` value',()=>{
       console.log(flash.debug());
       expect(flash.find('Component Text').at(0).text()).toEqual('First Text');
      })});

Теперь, когда я запускаю этот код с помощью npm test результат показывает

Expected value to equal:
  "First Text"
Received:
  "<Text />"

Мой ожидаемый результат - "Первый текст" и получение " Текстовый тег ".Что не так, пожалуйста, пожалуйста, кто-нибудь, помогите мне в этом.Заранее спасибо.

Answer 1

После установки всех зависимостей добавьте setup.js

    import { configure } from 'enzyme'import Adapter from 'enzyme-adapter-react-16'
configure({ adapter: new Adapter() })

В app.test.js:

import {shallow} from 'enzyme'import App from '../App';
import React from 'react'describe('test login module',()=>{
    const appWrapper = shallow(<App/>);
    it('renders app module correctly',()=>{
        expect(appWrapper).toMatchSnapshot();
    });
});

Вот ссылка

Вы можете сослаться

Answer 2

Поскольку вы используете shallow(), вложенные <Text /> не отображаются.Поэтому метод .text() не знает, как будет выглядеть текст.Так что кажется, что просто возвращается имя элемента даже без всех его реквизитов.

Конечно, вы можете заменить shallow() на mount(), но я предлагаю вам , используя здесь .toMatchSnapshot().

Тогда ваши тесты будут выглядеть как

  const flash = shallow(<Flash />);

  it('has valid default output',()=>{
   expect(flash).toMatchSnapshot();
  })});

, и при этом будут проверены как <Text /> элементы, так и текст внутри.

[UPD] дополнительно о том, почему .text() работаетсюда.Изображение у вас был тот же код с немного другим (но одинаковым!) Синтаксисом:

<Text children={'First Text'} />

Как хелпер энзима .text() мог знать, что вернуть сюда без узла рендеринга?

[UPD2]если нет способа использовать toMatchSnapshot(), все равно можно напрямую протестировать props:

expect(flash.find(Text).at(0).props().children).toEqual('First Text')

Но toMatchSnapshot намного лучше в нескольких отношениях (удобочитаемость, удобство обслуживания, гибкость и другие * возможности)