web-dev-qa-db-fra.com

Enzyme: La méthode «text» est uniquement destinée à être exécutée sur un seul nœud. 0 trouvé à la place

J'utilise React v15.4, babel-jest v18 et enzyme v2.5.1

J'ai un simple composant React:

import React, {Component} from 'react'
import {FormattedRelative} from 'react-intl'
import pageWithIntl from '../components/PageWithIntl'
import Layout from '../components/Layout'

class About extends Component {
  static async getInitialProps ({req}) {
    return {someDate: Date.now()}
  }

  render () {
    return (
      <Layout>
        <h1>About</h1>
        <p>
          <FormattedRelative
            value={this.props.someDate}
            updateInterval={1000}
          />
        </p>
      </Layout>
    )
  }
}

export default pageWithIntl(About)

Et un simple test de plaisanterie/enzyme:

/* global it, expect, describe */

import React from 'react'
import { shallow } from 'enzyme'
import renderer from 'react-test-renderer'
import About from '../pages/about.js'

describe('With Enzyme', () => {
  it('App shows "About"', () => {
    const about = shallow(
      <About />
    )
    expect(about.find('h1').text()).toEqual('About')
  })
})

Le test Jest devrait réussir mais je reçois une erreur:

La méthode "texte" est uniquement destinée à être exécutée sur un seul nœud. 0 trouvé à la place.

Qu'est-ce que je rate?

=== Mise à jour

Le test de l'instantané réussit:

describe('With Snapshot Testing', () => {
  it('About shows "About"', () => {
    const component = renderer.create(<About />)
    const tree = component.toJSON()
    expect(tree).toMatchSnapshot()
  })
})

Existe-t-il un moyen d'intégrer le test d'attente d'enzyme dans le test d'instantané? Et comment?

reactjsjestjsenzyme
14
StandardNerd

Cela est dû au fait que peu profond ne rend pas les componnets enfants et que votre composant a été enveloppé par une fonction. Ainsi, shallow ne renvoie qu'une représentation de la fonction et non du composant. Vous pouvez utiliser dive() pour atteindre le composant réel

/* global it, expect, describe */

import React from 'react'
import { shallow } from 'enzyme'
import renderer from 'react-test-renderer'
import About from '../pages/about.js'

describe('With Enzyme', () => {
  it('App shows "About"', () => {
    const about = shallow(
      <About />
    ).dive()
    expect(about.find('h1').text()).toEqual('About')
  })
})
9
Andreas Köberle

Veuillez consulter ce lien pour savoir comment utiliser le .findOù sur une copie superficielle: https://blogs.sequoiainc.com/an-enzyme-gotcha/

Ci-dessous, un exemple de recherche de nœuds/éléments html de type "p" qui contiennent le texte souhaité qui représente un salaire "100 000,00 $".

displayemployee = shallow(<DisplayEmployee employeeData={employee}

it('renders the employees salary', () => {
  expect(
    displayemployee.findWhere(
    n => n.type() === 'p' && n.contains('$100,000.00')
  )
)

La copie superficielle retourne tous les nœuds renvoyés par le composant React et je recherche ces nœuds avec .findWhere plutôt qu'avec .text. Cela est dû au fait que .text s'attend à parcourir un nœud unique ; .text ne sait pas comment parcourir de nombreux nœuds .

3
kat

tilisez .first ()

exemple const wrapper = shallow ()

wrapper.find ('h1 ou p ou .ClassName ou #id'). first ();

import React from 'react'
import { shallow } from 'enzyme'
import renderer from 'react-test-renderer'
import About from '../pages/about.js'

describe('With Enzyme', () => {
  it('App shows "About"', () => {
    const about = shallow(
      <About />
   )
  expect(about.find('h1').first().text()).toEqual('About')
 })
})
1
D V Yogesh

Vous pouvez également "exporter la classe" avec "exporter par défaut" et importer le composant en test avec la version d'importation destructurante.

Par exemple:

import React, {Component} from 'react'
import {FormattedRelative} from 'react-intl'
import pageWithIntl from '../components/PageWithIntl'
import Layout from '../components/Layout'

export class About extends Component {
  static async getInitialProps ({req}) {
    return {someDate: Date.now()}
  }

  render () {
    return (
      <Layout>
        <h1>About</h1>
        <p>
          <FormattedRelative
            value={this.props.someDate}
            updateInterval={1000}
          />
        </p>
      </Layout>
    )
  }
}

export default pageWithIntl(About)

Et le test:

/* global it, expect, describe */

import React from 'react'
import { shallow } from 'enzyme'
import renderer from 'react-test-renderer'
import { About } from '../pages/about.js'

describe('With Enzyme', () => {
  it('App shows "About"', () => {
    const about = shallow(
      <About />
    )
    expect(about.find('h1').text()).toEqual('About')
  })
})
0
pariskwsto