我如何使用酶（Jest）在React Native单元测试中测试Elements值

Question

I have the following Flash.js component to Test

export default class SnapshotChild extends Component {

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

And My test cases is

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');
      })});

Now when I run this code using npm test the result is showing

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

My expected result is "First Text" and getting " Text tag ". What's the wrong, please please somebody help me on this. Thanks in advance.

Answer 1

Since you use shallow() nested <Text /> are not rendered. So method .text() does not know how text will look like. So it seems just returning element name even without all its props.

Sure you can replace shallow() with mount() but I suggest you using amazing .toMatchSnapshot() here.

Then your tests would look like

  const flash = shallow(<Flash />);

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

and that would check for both <Text /> elements and text inside as well.

[UPD] additionaly on why .text() works this way. Image you had the same code with slightly different(but equal!) syntax:

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

How could enzyme's helper .text() know what to return here without rendering node?

[UPD2] if there is no way to use toMatchSnapshot() it's still possible to test props directly:

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

But toMatchSnapshot is much better in several ways(readability, maintainability, flexbility and other *abilities)

Answer 2

After installing all dependencies,add setup.js

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

In 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();
    });
});

Here is a Link

you may refer