How to write front-end tests has always been an area of interest, and the understanding of JEST tests has always remained at the level of Expect and toBe. Learn how to test React projects using Jest+Enzyme.

Environment set up

Preparing the React Project

Create a basic React project using create-react-app. The project I use is the project of learning technology fat React learning route construction.

Setting up the Test Environment

Install dependencies:

 npm install jest --save-dev
 npm install enzyme --save-dev
 npm install enzyme-to-json --save-dev
 npm install enzyme-adapter-react-16
Copy the code

Configuration packang. Json:

  "scripts": {
    "test": "jest"
  }
Copy the code

Jest configuration file

Generate the JEST configuration file

npx jest --init
Copy the code

In the newly generated jest configuration file jest.config.js:

  rootDir: '/'.setupFiles: [
    "<rootDir>/test/setup.js"].moduleFileExtensions: [
    "js"."jsx"."ts"."tsx"."json"."node"].Copy the code

`setup.js`file

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({ adapter: new Adapter() });
Copy the code

Import and export using ES6 will definitely be used in the test, so Babel is needed to convert the ES6 module into commonJs module.

npm install @babel/core @babel/preset-env
Copy the code

. Babelrc file

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}
Copy the code

Write the test

Components to be tested:

// App.js
import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>
        <h1>hello World</h1>
      </div>)}}export default App;
Copy the code

Test code:

//app.test.js
import React from 'react';
import App from '.. /src/App';
import { shallow } from 'enzyme'

describe('component APP test'.() = > {
  it('Test Hello World'.() = > {
    const app = shallow(<App />);
    expect(app.find('h1').text()).toBe('hello World')})})Copy the code

NPM test = NPM test

`Enzymejs`

The Enzyme function is to render the component to be tested so that the user can test UI rendering, DOM events, etc in the test environment.

reference

The official documentation

Commonly used API

.at(index)

It can be interpreted as returning a node based on an index. Nested ones are also included.

An 🌰

// The component to test
import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>
        <h1>hello</h1>
        <h1>World</h1>
      </div>)}}export default App;

// Test the code
import React from 'react';
import App from '.. /src/App';
import { shallow } from 'enzyme'

describe('component APP test'.() = > {
  it('Test Hello World'.() = > {
    const app = shallow(<App />);
    console.log(app.find('h1').at(0))
    console.log(app.find('h1').at(1))
    expect(app.find('h1').at(0).text()).toBe('hello')
    expect(app.find('h1').at(1).text()).toBe('World')})})Copy the code

The return value:

Raise an 🌰 again

// The component to test
import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>
        <h1>hello</h1>
        <h1>World</h1>
        // ********change start******
        <div>
          <h1>!!!!!</h1>
        </div>
        // ********change end******
      </div>)}}export default App;

// Test the code
import React from 'react';
import App from '.. /src/App';
import { shallow } from 'enzyme'

describe('component APP test'.() = > {
  it('Test Hello World'.() = > {
    const app = shallow(<App />);
    expect(app.find('h1').at(0).text()).toBe('hello')
    expect(app.find('h1').at(1).text()).toBe('World')
    // **********change start*********
    expect(app.find('h1').at(2).text()).toBe('. ')
     // **********change end*********})})Copy the code

Test results:

.childAt(index)

Returns a child element with the specified index to the new Wrapper.

An 🌰

// The component to test
import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>
        <h1>hello</h1>
        <h1>World</h1>
      </div>)}}export default App;

// Test the code
import React from 'react';
import App from '.. /src/App';
import { shallow } from 'enzyme'

describe('component APP test'.() = > {
  it('Test Hello World'.() = > {
    const app = shallow(<App />);
    // find div, not h1
    expect(app.find('div').childAt(0).text()).toBe('hello')
    expect(app.find('div').childAt(1).text()).toBe('World')})})Copy the code

The test results

Raise an 🌰 again

The test code remains unchanged, changing the component to be tested to the following structure:

import React, { Component } from 'react'; class App extends Component { render() { return ( <div> <h1>hello</h1> <h1>World</h1> // change start------------ <div> <h1>!! </h1> </div> // change end-------------- </div> ) } } export default App;Copy the code

The test results

Conclusion: childAt should only be used for find results based on unique conditions, such as a single div.

.find(selector)

Find the node in the render tree based on the selector.

The selector parameters:

Tags:find('tag')
The name of the class:find('.className')
Id:.find('#id')
Combination:.find('tag.className')
Constructor:.find(Foo)
Component display name:.find('Foo')
Object property selector:.find({ prop: 'value' })

For a heap of 🌰 🌰 🌰 🌰 🌰 🌰 🌰

/ / MyCom components
import React, { Component } from 'react';
class MyCom extends Component {
  render() {
    return (
      <h1>xixi</h1>)}}export default MyCom;

// The component to test
import React, { Component } from 'react';
import MyCom from './MyCom';
class App extends Component {
  render() {
    return (
      <div>
        <h1 className='helloClass'>hello</h1>
        <h1 id="worldID">World</h1>
        <span className="spanClass">ya</span>
        <span>haha</span>
        <span fo="heheKey">hehe</span>
        <MyCom />
      </div>)}}export default App;

// Test the code
import React from 'react';
import App from '.. /src/App';
import MyCom from '.. /src/MyCom';
import { shallow } from 'enzyme'

describe('component APP test'.() = > {
  it('Test Hello World'.() = > {
    const app = shallow(<App />);
    expect(app.find('span').at(1).text()).toBe('haha')
    expect(app.find('.helloClass').text()).toBe('hello')
    expect(app.find('#worldID').text()).toBe('World')
    expect(app.find('span.spanClass').text()).toBe('ya')
    expect(app.find('MyCom').text()).toBe('<MyCom />') // Cannot match to xixi, child component is not rendered
    expect(app.find(MyCom).text()).toBe('<MyCom />')
    expect(app.find({ fo: 'heheKey' }).text()).toBe('hehe')})})Copy the code

findWhere(predicate)

Finds nodes in the render tree where the predicate returns true. The assertion function returns a nonboolean value.

An 🌰

// The component to test
import React, { Component } from 'react';
import MyCom from './MyCom';
class App extends Component {
  render() {
    return (
      <div>
        <h1 className='helloClass'>hello</h1>
        <h1 className='helloClass1'>helloyaya</h1>
        <h1 id="worldID">World</h1>
        <span className="spanClass">ya</span>
        <span>haha</span>
        <span fo="heheKey">hehe</span>
        <MyCom />
      </div>)}}export default App;

// Test the code
import React from 'react';
import App from '.. /src/App';
import MyCom from '.. /src/MyCom';
import { shallow } from 'enzyme'

describe('component APP test'.() = > {
  it('Test Hello World'.() = > {
    const app = shallow(<App />);
    const wrapper = app.findWhere(n= > n.text().indexOf('hello') > -1);
    expect(wrapper.find('.helloClass').text()).toBe('hello')
    expect(wrapper.find('.helloClass1').text()).toBe('helloyaya')})})// Test passed!!
Copy the code

The API I understand is similar to a filter in an array, where nodes that meet the criteria are filtered out and returned in a new Wrapper. We can do find again in the Wrapper returned.

.filter(selector)

Return the node matching the provided selector wrapped as a Wrapper.

An 🌰

// The component to test
import React, { Component } from 'react';
import MyCom from './MyCom';
class App extends Component {
  render() {
    return (
      <div>
        <h1 className='helloClass'>hello</h1>
        <h1 id="worldID">World</h1>
        <span className="spanClass">ya</span>
        <span>haha</span>
        <span fo="heheKey">hehe</span>
        <MyCom />
      </div>)}}export default App;
// Test the code
import React from 'react';
import App from '.. /src/App';
import { shallow } from 'enzyme'

describe('component APP test'.() = > {
  it('Test Hello World'.() = > {
    const app = shallow(<App />);
    expect(app.find('h1').filter('.helloClass').text()).toBe('hello');
    expect(app.find('h1').filter('#worldID').text()).toBe('World'); })})// The test passes
Copy the code

Summary: Filter the nodes that meet the criteria from the nodes that have been searched

.filterWhere(predicate)

Returns a node that satisfies the assertion function.

An 🌰

// The component to test
import React, { Component } from 'react';
import MyCom from './MyCom';
class App extends Component {
  render() {
    return (
      <>
        <h1 className='helloClass'>hello</h1>
        <h1 id="worldID">World</h1>
        <span className="spanClass">ya</span>
        <span>haha</span>
        <span fo="heheKey">hehe</span>
        <MyCom />
      </>)}}export default App;
// Test the code
import React from 'react';
import App from '.. /src/App';
import { shallow } from 'enzyme'

describe('component APP test'.() = > {
  it('Test Hello World'.() = > {
    const app = shallow(<App />);
    expect(app.find('h1').filterWhere(n= > n.text() === 'hello').text()).toBe('hello');

    const wrapper = app.find('span').filterWhere(n= > n.text().indexOf('h') > -1);
    expect(wrapper.at(0).text()).toBe('haha');
    expect(wrapper.at(1).text()).toBe('hehe'); })})// The test passes
Copy the code

.contains(nodeOrNodes)

Returns a Boolean value indicating whether the given node (nodeOrNodes) is present in the render tree. You can check props and corresponding values. That is, return true if the expected element has the same props and shares the same value as the wrapper element.

An 🌰

// The component to test
import React, { Component } from 'react';
import MyCom from './MyCom';
class App extends Component {
  render() {
    return (
      <div>
        <h1 className='helloClass'>hello</h1>
        <h1 id="worldID">World</h1>
        <span className="spanClass">ya</span>
        <span>haha</span>
        <span fo="heheKey">hehe</span>
        <MyCom />
      </div>)}}export default App;

// Test the code
import React from 'react';
import App from '.. /src/App';
import { shallow } from 'enzyme'

describe('component APP test'.() = > {
  it('Test Hello World'.() = > {
    const app = shallow(<App />);
    expect(app.contains(<h1>hello</h1>)).toEqual(false);
    expect(app.contains(<h1 className={'a'} >hello</h1>)).toEqual(false);
    expect(app.contains(<h1 className={'helloClass'} >Hello</h1>)).toEqual(false);
    expect(app.contains(<h1 className={'helloClass'} >hello</h1>)).toEqual(true);
    expect(app.contains(<h1 className='helloClass'>hello</h1>)).toEqual(true);

    expect(app.contains([
      <h1 id="worldID">World</h1>.<span className="spanClass">ya</span>
    ])).toEqual(true)

    expect(app.contains([
      <h1 id="worldID">World</h1>.<span>haha</span>
    ])).toEqual(false)})})Copy the code

Summary: strict matching, can not be a bit different, multiple nodes must be adjacent, otherwise it will not succeed.

.containsMatchingElement(node)

Returns a Boolean value for whether the given node exists in the shallow rendering tree.

An 🌰

// The component to test
import React, { Component } from 'react';
import MyCom from './MyCom';
class App extends Component {
  render() {
    return (
      <div>
        <h1 className='helloClass' data-fo="foo">hello</h1>
        <h1 id="worldID">World</h1>
        <span className="spanClass">ya</span>
        <span>haha</span>
        <span fo="heheKey">hehe</span>
        <MyCom />
      </div>)}}export default App;
// Test the code
import React from 'react';
import App from '.. /src/App';
import { shallow } from 'enzyme'

describe('component APP test'.() = > {
  it('Test Hello World'.() = > {
    const app = shallow(<App />);
    expect(app.containsMatchingElement(<h1>hello</h1>)).toEqual(true);
    expect(app.containsMatchingElement(<h1 className='helloClass' >hello</h1>)).toEqual(true);
    expect(app.containsMatchingElement(<h1 data-fo='foo'>hello</h1>)).toEqual(true);
    expect(app.containsMatchingElement(<h1 data-fo='foo-data'>hello</h1>)).toEqual(false);
    expect(app.containsMatchingElement(<h1 data-fo='foo' />)).toEqual(false); })})Copy the code

It comes down to this: less, not more. Props and values are completely compatible, unlike contains.

.containsAllMatchingElements(nodes)

Specifies whether all elements exist in the shallow render tree. Follow the containsMatchingElement matching principle.

An 🌰

// The component to test
import React, { Component } from 'react';
import MyCom from './MyCom';
class App extends Component {
  render() {
    return (
      <div>
        <h1 className='helloClass'>hello</h1>
        <h1 id="worldID">World</h1>
        <span className="spanClass">ya</span>
        <span>haha</span>
        <span fo="heheKey">hehe</span>
        <MyCom />
      </div>)}}export default App;

// Test the code
import React from 'react';
import App from '.. /src/App';
import { shallow } from 'enzyme'

describe('component APP test'.() = > {
  it('Test Hello World'.() = > {
    const app = shallow(<App />);
    expect(app.containsAllMatchingElements([
      <h1>hello</h1>.<h1 id="worldID">World</h1>
    ])).toEqual(true);

    expect(app.containsAllMatchingElements([
      <h1 className='helloClass'>hello</h1>.<h1 id="worldID">World</h1>
    ])).toEqual(true);

    expect(app.containsAllMatchingElements([
      <h1 className='helloClass'>hello</h1>.<span>haha</span>
    ])).toEqual(true); })})// The test passes
Copy the code

.containsAnyMatchingElements(nodes)

Returns true if there is a match in a given node.

An 🌰

// The component to test
import React, { Component } from 'react';
import MyCom from './MyCom';
class App extends Component {
  render() {
    return (
      <div>
        <h1 className='helloClass'>hello</h1>
        <h1 id="worldID">World</h1>
        <span className="spanClass">ya</span>
        <span>haha</span>
        <span fo="heheKey">hehe</span>
        <MyCom />
      </div>)}}export default App;
/ / code
import React from 'react';
import App from '.. /src/App';
import { shallow } from 'enzyme'

describe('component APP test'.() = > {
  it('Test Hello World'.() = > {
    const app = shallow(<App />);
    expect(app.containsAnyMatchingElements([
      <h1>hello</h1>.<h1 id="worldIDDDD">World</h1>
    ])).toEqual(true);

    expect(app.containsAnyMatchingElements([
      <h1 className='helloClass'>hello</h1>.<h1 id="worldIDDDD">World</h1>
    ])).toEqual(true);

    expect(app.containsAnyMatchingElements([
      <h1 className='helloClass'>hello</h1>.<span>haha</span>
    ])).toEqual(true);

    expect(app.containsAnyMatchingElements([
      <h1 className='helloClass'>hello</h1>.<span className='span'>haha</span>
    ])).toEqual(true); })})Copy the code

Contains summary: Matching rules are getting simpler

The title	Match rule	Detecting the Number of Nodes
contains	Strict matching	Single or multiple nodes (multiple nodes can be matched only if they are adjacent)
containsMatchingElement	The shortest match	A single
containsAllMatchingElements	The shortest match	Multiple (multiple nodes may not be adjacent)
containsAnyMatchingElements	The shortest match	Multiple (multiple nodes can not be adjacent, one of multiple nodes returns true)

.equals(node)

Returns Boolean: indicates whether the root node of the currently rendered tree is the same as the one passed in, ignoring undefined attributes.

An 🌰

// The component to test
import React, { Component } from 'react';
import MyCom from './MyCom';
class App extends Component {
  render() {
    return (
      <div>
        <h1 className='helloClass'>hello</h1>{/ *<h1 id="worldID">World</h1>
        <span className="spanClass">ya</span>
        <span>haha</span>
        <span fo="heheKey">hehe</span>
        <MyCom />* /}</div>)}}export default App;
// Test the code
import React from 'react';
import App from '.. /src/App';
import { shallow } from 'enzyme'

describe('component APP test'.() = > {
  it('Test Hello World'.() = > {
    const app = shallow(<App />);
    expect(app.equals(<div><h1 className='helloClass'>hello</h1></div>)).toEqual(true)
    expect(app.equals(<div><h1>hello</h1></div>)).toEqual(false)
    expect(app.equals(<h1 className='helloClass'>hello</h1>)).toEqual(false)
    expect(app.equals(<div></div>)).toEqual(false)})})Copy the code

Note: The test fails when the comment section of the component is uncommented

.matchesElement(node) => Boolean

The current node is in the current shallow rendering tree.

An 🌰

// The component to test
import React, { Component } from 'react';
import MyCom from './MyCom';
class App extends Component {
  render() {
    return (
      <div>
        <h1 className='helloClass'>hello</h1>{/ *<h1 id="worldID">World</h1>
        <span className="spanClass">ya</span>
        <span>haha</span>
        <span fo="heheKey">hehe</span>
        <MyCom />* /}</div>)}}export default App;
// Test the code
import React from 'react';
import App from '.. /src/App';
import { shallow } from 'enzyme'

describe('component APP test'.() = > {
  it('Test Hello World'.() = > {
    const app = shallow(<App />);
    expect(app.matchesElement(<div><h1 className='helloClass'>hello</h1></div>)).toEqual(true)
    expect(app.matchesElement(<div><h1>hello</h1></div>)).toEqual(true)
    expect(app.matchesElement(<h1>hello</h1>)).toEqual(false)
    expect(app.matchesElement(<div></div>)).toEqual(false)})})Copy the code

Note: The test fails when the component comment section is uncommented

The title	Match rule
equals	Strict matching
matchesElement	The shortest match

But both are strict matches for nesting.

.hasClass(className) => Boolean

Is there a className

An 🌰

// The component to test
import React, { Component } from 'react';
import MyCom from './MyCom';
class App extends Component {
  render() {
    return (
      <div>
        <h1 className='helloClass'>hello</h1>
        <h1 id="worldID" className='worldClass'>World</h1>
        <span className="spanClass">ya</span>
        <span>haha</span>
        <span fo="heheKey">hehe</span>
        <MyCom />
      </div>)}}export default App;

// Test the code
import React from 'react';
import App from '.. /src/App';
import { shallow } from 'enzyme'

describe('component APP test'.() = > {
  it('Test Hello World'.() = > {
    const app = shallow(<App />);
    expect(app.find('h1').at(0).hasClass('helloClass')).toEqual(true);
    expect(app.find('#worldID').hasClass('worldClass')).toEqual(true); })})Copy the code

.is(selector) => Boolean

Returns whether a single wrapper node matches the provided selector. It must be a single-node wrapper.

An 🌰

// The component to test
import React, { Component } from 'react';
import MyCom from './MyCom';
class App extends Component {
  render() {
    return (
      <h1 className='helloClass'>hello</h1>)}}export default App;

// Test the code
import React from 'react';
import App from '.. /src/App';
import { shallow } from 'enzyme'

describe('component APP test'.() = > {
  it('Test Hello World'.() = > {
    const app = shallow(<App />);
    expect(app.is('.helloClass')).toEqual(true);
    expect(app.is('h1')).toEqual(true); })})Copy the code

Raise an 🌰 again

// The component to test
import React, { Component } from 'react';
import MyCom from './MyCom';
class App extends Component {
  render() {
    return (
      <div>
        <h1 className='helloClass'>hello</h1>
      </div>)}}export default App;
// Test the code
import React from 'react';
import App from '.. /src/App';
import { shallow } from 'enzyme'

describe('component APP test'.() = > {
  it('Test Hello World'.() = > {
    const app = shallow(<App />);
    expect(app.is('.helloClass')).toEqual(false);
    expect(app.is('h1')).toEqual(false);
    expect(app.is('div')).toEqual(true); })})Copy the code

.exists() => Boolean

Whether the current node exists

An 🌰

// The component to test
import React, { Component } from 'react';
import MyCom from './MyCom';
class App extends Component {
  render() {
    return (
      <div>
        <h1 className='helloClass'>hello</h1>
        <h1 id="worldID" className='worldClass'>World</h1>
        <span className="spanClass">ya</span>
        <span>haha</span>
        <span fo="heheKey">hehe</span>
        <MyCom />
      </div>)}}export default App;

// Test the code
import React from 'react';
import App from '.. /src/App';
import { shallow } from 'enzyme'

describe('component APP test'.() = > {
  it('Test Hello World'.() = > {
    const app = shallow(<App />);
    expect(app.exists('.helloClass')).toEqual(true);
    expect(app.find('#worldID').exists()).toEqual(true); })})Copy the code

.not(selector) => ShallowWrapper

Removes nodes in the current Wrapper that match the provided selector. (As opposed to.filter())

An 🌰

// The component to test
import React, { Component } from 'react';
import MyCom from './MyCom';
class App extends Component {
  render() {
    return (
      <div>
        <h1 className='helloClass'>hello</h1>
        <h1 id="worldID" className='worldClass'>World</h1>
        <span className="spanClass">ya</span>
        <span>haha</span>
        <span fo="heheKey">hehe</span>
        <MyCom />
      </div>)}}export default App;
// Test the code
import React from 'react';
import App from '.. /src/App';
import { shallow } from 'enzyme'

describe('component APP test'.() = > {
  it('Test Hello World'.() = > {
    const app = shallow(<App />);
    expect(app.find('h1').not('.helloClass').text()).toBe('World')})})Copy the code

.children() => ShallowWrapper

Gets wrappers for all child nodes in the current Wrapper.

🌰 🌰 🌰

// The component to test
import React, { Component } from 'react';
import MyCom from './MyCom';
class App extends Component {
  render() {
    return (
      <div>
        <h1 className='helloClass'>hello</h1>
        <h1 id="worldID" className='worldClass'>World</h1>
        <span className="spanClass">ya</span>
        <span>haha</span>
        <span fo="heheKey">hehe</span>
        <MyCom />
      </div>)}}export default App;
// Test the code
import React from 'react';
import App from '.. /src/App';
import { shallow } from 'enzyme'

describe('component APP test'.() = > {
  it('Test Hello World'.() = > {
    const app = shallow(<App />);
    expect(app.find('div').children()).toHaveLength(6)
    expect(app.find('h1').children()).toHaveLength(2)
    expect(app.find('h1').children().at(0).text()).toBe('hello')
    expect(app.find('h1').children().at(1).text()).toBe('World')})})Copy the code

.childAt(index) => ShallowWrapper

Returns a Wrapper for the child element with the specified index

🌰 🌰 🌰

// The component to test
import React, { Component } from 'react';
import MyCom from './MyCom';
class App extends Component {
  render() {
    return (
      <div>
        <h1 className='helloClass'>hello</h1>
        <h1 id="worldID" className='worldClass'>World</h1>
        <span className="spanClass">ya</span>
        <span>haha</span>
        <span fo="heheKey">hehe</span>
        <MyCom />
      </div>)}}export default App;
// Test the code
import React from 'react';
import App from '.. /src/App';
import { shallow } from 'enzyme'

describe('component APP test'.() = > {
  it('Test Hello World'.() = > {
    const app = shallow(<App />);
    expect(app.find('div').childAt(0).text()).toBe('hello')
    // expect(app.find('h1').childAt(1)).toBe('World')
    "ChildAt" is meant to be run on 1 node. 2 found instead.})})Copy the code

.parents() => ShallowWrapper

Gets all the parents of the current node

🌰 🌰 🌰

// The component to test
import React, { Component } from 'react';
import MyCom from './MyCom';
class App extends Component {
  render() {
    return (
      <div>
        <h1>
          <p>haha</p>
        </h1>
        <span>xixi</span>
      </div>)}}export default App;
// Test the code
import React from 'react';
import App from '.. /src/App';
import { shallow } from 'enzyme'

describe('component APP test'.() = > {
  it('Test Hello World'.() = > {
    const app = shallow(<App />);
    expect(app.find('p').parents()).toHaveLength(2)
    expect(app.find('span').parents()).toHaveLength(1)})})Copy the code

.parent() => ShallowWrapper

Gets the immediate parent of the current node

🌰 🌰 🌰

// The component to test
import React, { Component } from 'react';
class App extends Component {
  render() {
    return (
      <div>
        <h1>
          <p>haha</p>
        </h1>
        <span>xixi</span>
      </div>)}}export default App;
// Test the code
import React from 'react';
import App from '.. /src/App';
import { shallow } from 'enzyme'

describe('component APP test'.() = > {
  it('Test Hello World'.() = > {
    const app = shallow(<App />);
    expect(app.find('p').parent()).toHaveLength(1)
    expect(app.find('span').parent()).toHaveLength(1)})})Copy the code

.closest(selector) => ShallowWrapper

Returns the node that matches the current selector by traversing up from itself. Must be a single-node wrapper.

🌰 🌰 🌰

// The component to test
import React, { Component } from 'react';
import MyCom from './MyCom';
class App extends Component {
  render() {
    return (
      <span className='calss1'>
        <h1>
          <p>haha</p>
        </h1>
        <span>xixi</span>{/ *<p className='class2'>hehe</p>* /}</span>)}}export default App;
// Test the code
import React from 'react';
import App from '.. /src/App';
import { shallow } from 'enzyme'

describe('component APP test'.() = > {
  it('Test Hello World'.() = > {
    const app = shallow(<App />);
    expect(app.find('p').closest('.calss1').children().at(1).text()).toBe('xixi')})})Copy the code

An error is reported when the comment part of a component is uncommented:

You should ensure that the lookup node (p) is a single node.

.shallow([options]) => ShallowWrapper

Shallow render of the current component to generate the virtual DOM.

.render() => CheerioWrapper

Returns CheerioWrapper for the subtree of the current node

.unmount() => ShallowWrapper

A way to unload components. This can be used to simulate components that go through the uninstall/install life cycle.

.text() => String

Returns a string representation of this node in the current render tree.

.html() => String

Returns a static HTML rendering of the current node

🌰 🌰 🌰

// The component to test
import React, { Component } from 'react';
import MyCom from './MyCom';
class App extends Component {
  render() {
    return (
      <span className='calss1'>
        <h1>
          <p>haha</p>
        </h1>
        <span>xixi</span>
        <p className='class2'>hehe</p>
      </span>)}}export default App;
// Test the code
import React from 'react';
import App from '.. /src/App';
import { shallow } from 'enzyme'

describe('component APP test'.() = > {
  it('Test Hello World'.() = > {
    const app = shallow(<App />);
    console.log(app.find('.class2').html())
  })
})
Copy the code

Test results:

.get(index) => ReactElement

Returns the index node ReactElement

🌰 🌰 🌰

// The component to test
import React, { Component } from 'react';
import MyCom from './MyCom';
class App extends Component {
  render() {
    return (
      <div className='calss1'>
        <h1>
          <p>haha</p>
        </h1>
        <span foo='foo-data'>xixi</span>
        <p className='class2'>hehe</p>
      </div>)}}export default App;
// Test the code
import React from 'react';
import App from '.. /src/App';
import { shallow } from 'enzyme'

describe('component APP test'.() = > {
  it('Test Hello World'.() = > {
    const app = shallow(<App />);
    expect(app.find('div').children().get(1).props.foo).toBe('foo-data')})})Copy the code

Can be used to test props parameters.

.at(index) => ShallowWrapper

Returns the node based on the index.

🌰 🌰 🌰

// The component to test
import React, { Component } from 'react';
class App extends Component {
  render() {
    return (
      <div className='calss1'>
        <h1>
          <p>haha</p>
        </h1>
        <span foo='foo-data'>xixi</span>
        <p className='class2'>hehe</p>
      </div>)}}export default App;

// Test the code
import React from 'react';
import App from '.. /src/App';
import { shallow } from 'enzyme'

describe('component APP test'.() = > {
  it('Test Hello World'.() = > {
    const app = shallow(<App />);
    expect(app.find('p')
    .at(0)
    .text()).toBe('haha')})})// The test passes
Copy the code

.first() => ShallowWrapper

Returns the wrapper for the current first node

🌰 🌰 🌰

// The component to test
import React, { Component } from 'react';
class App extends Component {
  render() {
    return (
      <div className='calss1'>
        <h1>
          <p>haha</p>
        </h1>
        <span foo='foo-data'>xixi</span>
        <p className='class2'>hehe</p>
      </div>)}}export default App;
// Test the code
import React from 'react';
import App from '.. /src/App';
import { shallow } from 'enzyme'

describe('component APP test'.() = > {
  it('Test Hello World'.() = > {
    const app = shallow(<App />);
    expect(app.find('p')
    .first()
    .text()).toBe('haha')})})Copy the code

.last() => ShallowWrapper

Returns the wrapper for the current last node

🌰 🌰 🌰

// The component to test
import React, { Component } from 'react';
class App extends Component {
  render() {
    return (
      <div className='calss1'>
        <h1>
          <p>haha</p>
        </h1>
        <span foo='foo-data'>xixi</span>
        <p className='class2'>hehe</p>
      </div>)}}export default App;
// Test the code
import React from 'react';
import App from '.. /src/App';
import { shallow } from 'enzyme'

describe('component APP test'.() = > {
  it('Test Hello World'.() = > {
    const app = shallow(<App />);
    expect(app.find('p')
    .last()
    .text()).toBe('hehe')})})Copy the code

.state([key]) => Any

Returns the state of the root component. This can only be applied to the same component and will cause an error if used on a node of Find. ShallowWrapper::state() can only be called on the root

🌰 🌰 🌰

// The component to test
import React, { Component } from 'react';
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: 'jerry'.age: 23}}render() {
    return (
      <div className='calss1'>
        <h1>
          <p>haha</p>
          <span>enen</span>
        </h1>
        <span foo='foo-data'>xixi</span>
        <p className='class2'>hehe</p>
      </div>)}}export default App;
// Test the code
import React from 'react';
import App from '.. /src/App';
import { shallow } from 'enzyme'

describe('component APP test'.() = > {
  it('Test Hello World'.() = > {
    const app = shallow(<App />);
    expect(app.state('name')).toBe('jerry')})})Copy the code

.context([key]) => Any

Returns the context of the root component

.props() => Object

Returns the props of the current node

🌰 🌰 🌰

// The component to test
import React, { Component } from 'react';
class App extends Component {
  render() {
    return (
      <div className='calss1'>
        <h1>
          <p>haha</p>
          <span>enen</span>
        </h1>
        <span foo='foo-data'>xixi</span>
        <p className='class2'>hehe</p>
      </div>)}}export default App;
// Test the code
import React from 'react';
import App from '.. /src/App';
import { shallow } from 'enzyme'

describe('component APP test'.() = > {
  it('Test Hello World'.() = > {
    const app = shallow(<App />);
    console.log(app.find("span").at(1).props());
    // { foo: 'foo-data', children: 'xixi' }})})Copy the code

.prop(key) => Any

Returns the value of a (key) property of the current node props

🌰 🌰 🌰

// The component to test
import React, { Component } from 'react';
class App extends Component {
  render() {
    return (
      <div className='calss1'>
        <h1>
          <p>haha</p>
          <span>enen</span>
        </h1>
        <span foo='foo-data'>xixi</span>
        <p className='class2'>hehe</p>
      </div>)}}export default App;

// Test the code
import React from 'react';
import App from '.. /src/App';
import { shallow } from 'enzyme'

describe('component APP test'.() = > {
  it('Test Hello World'.() = > {
    const app = shallow(<App />);
    expect(app.find("span").at(1).prop('foo')).toBe('foo-data'); })})Copy the code

.key() => String

Returns the key of the current node.

🌰 🌰 🌰

// The component to test
import React, { Component } from 'react';
class App extends Component {
  render() {
    return (
      <div className='calss1'>
        <h1 key='h1Key'>
          <p>haha</p>
          <span>enen</span>
        </h1>
        <span foo='foo-data'>xixi</span>
        <p className='class2'>hehe</p>
      </div>)}}export default App;
// Test the code
import React from 'react';
import App from '.. /src/App';
import { shallow } from 'enzyme'

describe('component APP test'.() = > {
  it('Test Hello World'.() = > {
    const app = shallow(<App />);
    expect(app.find("h1").key()).toBe('h1Key'); })})Copy the code

.simulate(event[, data]) => ShallowWrapper

Simulate events on the current node

🌰 🌰 🌰

The following components exist:

import React, { Component } from 'react';
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    }
  }
  handleClick = () = > {
    this.setState({
      count: this.state.count + 1})}render() {
    return (
      <div className='calss1'>
        <button onClick={this.handleClick}>increase</button>
      </div>)}}export default App;
Copy the code

We need to test the following contents:

Click on theincreaseButton triggers click event —simulate
Test the state after the click eventcountWhether to add 1

// Test the code
import React from 'react';
import App from '.. /src/App';
import { shallow } from 'enzyme'

describe('component APP test'.() = > {
  it('Test Hello World'.() = > {
    const app = shallow(<App />);
    expect(app.state("count")).toBe(0)
    const btn = app.find('button');
    btn.simulate('click');
    expect(app.state('count')).toBe(1)})})Copy the code

.setState(nextState) => ShallowWrapper

Manually setState updates the root component state

🌰 🌰 🌰

// The component to test
import React, { Component } from 'react';
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    }
  }
  handleClick = () = > {
    this.setState({
      count: this.state.count + 1})}render() {
    return (
      <div className='calss1'>
        <button onClick={this.handleClick}>increase</button>
      </div>)}}export default App;
// Test the code
import React from 'react';
import App from '.. /src/App';
import { shallow } from 'enzyme'

describe('component APP test'.() = > {
  it('Test Hello World'.() = > {
    const app = shallow(<App />);
    expect(app.state('count')).toBe(0);
    app.setState({count:5})
    expect(app.state('count')).toBe(5)})})Copy the code

.setProps(nextProps) => ShallowWrapper

Manually update the props of the root component

🌰 🌰 🌰

// The component to test
import React, { Component } from 'react';
class App extends Component {
  render() {
    return (
      <div className='calss1'>
        <p>hi:{this.props.name}</p>
      </div>)}}export default App;

// Test the code
import React from 'react';
import App from '.. /src/App';
import { shallow } from 'enzyme'

describe('component APP test'.() = > {
  it('Test Hello World'.() = > {
    const app = shallow(<App name='jerry' />);
    expect(app.find('p').text()).toBe('hi:jerry');
    app.setProps({name:'tom'});
    expect(app.find('p').text()).toBe('hi:tom')})})Copy the code

.setContext(context) => ShallowWrapper

Manually set the context of the root component

.instance() => ReactComponent

Returns an instance of the root component

🌰 🌰 🌰

// The component to test
import React, { Component } from 'react';
class App extends Component {
  render() {
    return (
      <div className='calss1'>
        <p>hi:{this.props.name}</p>
      </div>)}}export default App;
// Test the code
import React from 'react';
import App from '.. /src/App';
import { shallow } from 'enzyme'

describe('component APP test'.() = > {
  it('Test Hello World'.() = > {
    const app = shallow(<App name='jerry' />);
    console.log(app.instance())
  })
})
Copy the code

Note: This can only be called on the wrapper instance of the root instance. In React 16 and later, instance() returns NULL for stateless functionality components.

.update() => ShallowWrapper

Call.forceUpdate() on the root component instance

.debug() => String

Returns a string representation of the current shallow rendering tree for debugging purposes

🌰 🌰 🌰

// The component to test
import React, { Component } from 'react';
class App extends Component {
  render() {
    return (
      <div className='calss1'>
        <p>hi:{this.props.name}</p>
      </div>)}}export default App;
// Test the code
import React from 'react';
import App from '.. /src/App';
import { shallow } from 'enzyme'

describe('component APP test'.() = > {
  it('Test Hello World'.() = > {
    const app = shallow(<App name='jerry' />);
    console.log(app.debug())
  })
})
Copy the code

.type() => String|Function

Returns the type of the wrapper’s current node.

🌰 🌰 🌰

// The component to test
import React, { Component } from 'react';
class App extends Component {
  render() {
    return (
      <div className='calss1'>
        <p>hi:{this.props.name}</p>
      </div>)}}export default App;
// Test the component
import React from 'react';
import App from '.. /src/App';
import { shallow } from 'enzyme'

describe('component APP test'.() = > {
  it('Test Hello World'.() = > {
    const app = shallow(<App name='jerry' />);
    expect(app.find('p').type()).toBe("p")
    expect(app.find('div').type()).toBe('div')})})Copy the code

.name() => String

Returns the name of the current node

🌰 🌰 🌰

// The component to test
import React, { Component } from 'react';
class App extends Component {
  render() {
    return (
      <div className='calss1'>
        <p>hi:{this.props.name}</p>
      </div>)}}export default App;
// Test the code
import React from 'react';
import App from '.. /src/App';
import { shallow } from 'enzyme'

describe('component APP test'.() = > {
  it('Test Hello World'.() = > {
    const app = shallow(<App name='jerry' />);
    expect(app.find('p').name()).toBe("p")
    expect(app.find('div').name()).toBe('div')})})Copy the code

.forEach(fn) => ShallowWrapper

Iterate over each node currently and execute the provided function

🌰 🌰 🌰

// The component to test
import React, { Component } from 'react';
class App extends Component {
  render() {
    return (
      <div className='calss1'>
        <div className="foo bax" />
        <div className="foo bar" />
        <div className="foo baz" />
      </div>)}}export default App;
// Test the code
import React from 'react';
import App from '.. /src/App';
import { shallow } from 'enzyme'

describe('component APP test'.() = > {
  it('Test Hello World'.() = > {
    const app = shallow(<App name='jerry' />);
    const wrappers = app.find('.calss1').children();
    wrappers.forEach(e= >{
      expect(e.hasClass('foo')).toEqual(true); })})})Copy the code

.map(fn) => Array

Maps the current node array to another array

🌰 🌰 🌰

// The component to test
import React, { Component } from 'react';
class App extends Component {
  render() {
    return (
      <div className='calss1'>
        <div className="foo bax" >a</div>
        <div className="foo bar" >b</div>
        <div className="foo baz bar" >c</div>
      </div>)}}export default App;
// Test the code
import React from 'react';
import App from '.. /src/App';
import { shallow } from 'enzyme'

describe('component APP test'.() = > {
  it('Test Hello World'.() = > {
    const app = shallow(<App name='jerry' />);
    const wrappers = app.find('.calss1').children();
    const map_wrappers = wrappers.map(e= > e.hasClass('bar'));
    expect(map_wrappers).toEqual([false.true.true]);

    const text_wrappers = wrappers.map(e= >e.text());
    expect(text_wrappers).toEqual(['a'.'b'.'c'])})})Copy the code

.reduce(fn[, initialValue]) => Any

Apply the supplied reduction function to each node in the wrapper to reduce to a single value. Each node is passed in as a ShallowWrapper and processed from left to right.

Function: A reduction function run for each node in the collection, with the following parameters:
- Value: The value returned from the last call to this function
- Node: node wrapper being processed
- Index: indicates the index of the node being processed
InitialValue: If provided, this will be passed as the first argument to reduce the first call to the function. If omitted, the first node is supplied, and the iteration begins with the second node in the collection.

🌰 🌰 🌰

// The component to test
import React, { Component } from 'react';
class App extends Component {
  render() {
    return (
      <div className='calss1'>
        <div className="foo" count={2}>a</div>
        <div className="foo" count={12}>b</div>
        <div className="foo" count={14}>c</div>
      </div>)}}export default App;
// Test the code
import React from 'react';
import App from '.. /src/App';
import { shallow } from 'enzyme'

describe('component APP test'.() = > {
  it('Test Hello World'.() = > {
    const app = shallow(<App name='jerry' />);
    const wrappers = app.find('.foo');
    const totalCount = wrappers.reduce((count, n) = > count + n.prop('count'), 0);

    expect(totalCount).toEqual(28);
    const totalCount1 = wrappers.reduce((count, n) = > count + n.prop('count'));
    expect(totalCount1).toEqual("[object Object]1214")})})Copy the code

.reduceRight(fn[, initialValue]) => Any

Reduces the current node array to one value from right to left. Reduce is from left to right, and this is from right to left.

.slice([begin[, end]]) => ShallowWrapper

Returns a new wrapper for a subset of the nodes with the original wrapper according to the rules of Array’s slice.

🌰 🌰 🌰

// The component to test
import React, { Component } from 'react';
class App extends Component {
  render() {
    return (
      <div className='calss1'>
        <div className="foo" count={2}>a</div>
        <div className="foo" count={12}>b</div>
        <div className="foo" count={14}>c</div>
      </div>)}}export default App;
// Test the code
import React from 'react';
import App from '.. /src/App';
import { shallow } from 'enzyme'

describe('component APP test'.() = > {
  it('Test Hello World'.() = > {
    const app = shallow(<App name='jerry' />);
    const wrappers = app.find('.foo');
    const slice_wrapper = wrappers.slice(1.2);
    const text = slice_wrapper.map(e= >e.text())
    expect(text).toEqual(['b'])})})Copy the code

.tap(intercepter) => Self

Click on the Wrapper method chain. Helps with debugging.

🌰 🌰 🌰

// The component to test
import React, { Component } from 'react';
class App extends Component {
  render() {
    return (
      <div className='calss1'>
        <div className="foo" count={2}>a</div>
        <div className="foo" count={12}>b</div>
        <div className="foo" count={14}>c</div>
      </div>)}}export default App;
// Test the code
import React from 'react';
import App from '.. /src/App';
import { shallow } from 'enzyme'

describe('component APP test'.() = > {
  it('Test Hello World'.() = > {
    const app = shallow(<App name='jerry' />);
    const wrappers = app.find('.foo');
    
    const result= wrappers.tap(n= >console.log(n.debug())).map(n= >n.text());
    expect(result).toEqual(['a'.'b'.'c'])})})Copy the code

.some(selector) => Boolean

Returns whether any nodes in the render tree match the provided selector.

// The component to test
import React, { Component } from 'react';
class App extends Component {
  render() {
    return (
      <div className='calss1'>
        <div className="foo" id='aId' count={2}>a</div>
        <div className="foo" count={12}>b</div>
        <div className="foo" count={14}>c</div>
      </div>)}}export default App;
// Test the code
import React from 'react';
import App from '.. /src/App';
import { shallow } from 'enzyme'

describe('component APP test'.() = > {
  it('Test Hello World'.() = > {
    const app = shallow(<App name='jerry' />);
    const wrappers = app.find('.foo');
    expect(wrappers.some('#aId')).toEqual(true)})})Copy the code

.someWhere(predicate) => Boolean

Returns whether any nodes in the render tree match the provided assertion function. Some is a functional representation of some, for example, when it needs to be processed and then asserted.

🌰 🌰 🌰

// The component to test
import React, { Component } from 'react';
class App extends Component {
  render() {
    return (
      <div className='calss1'>
        <div className="foo bar" count={2}>a</div>
        <div className="foo" count={12}>b</div>
        <div className="foo" count={14}>c</div>
      </div>)}}export default App;
// Test the code
import React from 'react';
import App from '.. /src/App';
import { shallow } from 'enzyme'

describe('component APP test'.() = > {
  it('Test Hello World'.() = > {
    const app = shallow(<App name='jerry' />);
    const wrappers = app.find('.foo');
    expect(wrappers.someWhere(n= > n.hasClass('bar'))).toEqual(true)})})Copy the code

.every(selector) => Boolean

Returns whether all nodes in the render tree match the provided selector.

🌰 🌰 🌰

// The component to test
import React, { Component } from 'react';
class App extends Component {
  render() {
    return (
      <div className='calss1'>
        <div className="foo bar" count={2}>a</div>
        <div className="foo boo" count={12}>b</div>
        <div className="foo aoo" count={14}>c</div>
      </div>)}}export default App;
// Test the code
import React from 'react';
import App from '.. /src/App';
import { shallow } from 'enzyme'

describe('component APP test'.() = > {
  it('Test Hello World'.() = > {
    const app = shallow(<App name='jerry' />);
    const wrappers = app.find('.foo');
    expect(wrappers.every('.bar')).toEqual(false);
    expect(wrappers.every('.boo')).toEqual(false);
    expect(wrappers.every('.foo')).toEqual(true); })})Copy the code

.everyWhere(predicate) => Boolean

Returns whether all nodes satisfy the provided assertion function.

🌰 🌰 🌰

// The component to test
import React, { Component } from 'react';
class App extends Component {
  render() {
    return (
      <div className='calss1'>
        <div className="foo bar" count={2}>a</div>
        <div className="foo boo" count={12}>b</div>
        <div className="foo aoo" count={14}>c</div>
      </div>)}}export default App;
// Test the code
import React from 'react';
import App from '.. /src/App';
import { shallow } from 'enzyme'

describe('component APP test'.() = > {
  it('Test Hello World'.() = > {
    const app = shallow(<App name='jerry' />);
    const wrappers = app.find('.foo');
    expect(wrappers.everyWhere(n= >n.hasClass('bar'))).toEqual(false);
    expect(wrappers.everyWhere(n= >n.hasClass('boo'))).toEqual(false);
    expect(wrappers.everyWhere(n= >n.hasClass('foo'))).toEqual(true); })})Copy the code

.dive([options]) => ShallowWrapper

Shallow renders a non-DOM child of the current Wrapper and returns a Wrapper around the result, which must be a single-node wrapper.

🌰 🌰 🌰

// The component to test
import React, { Component } from 'react';
import MyCom from './MyCom'
class App extends Component {
  render() {
    return (
      <div className='calss1'>
        <div className="foo bar" count={2}>a</div>
        <MyCom />
      </div>)}}export default App;

// MyCom
import React, { Component } from 'react';
class MyCom extends Component {
  render() {
    return (
      <h1>xixi</h1>)}}export default MyCom;

// Test the code

import React from 'react';
import App from '.. /src/App';
import { shallow } from 'enzyme'

describe('component APP test'.() = > {
  it('Test Hello World'.() = > {
    const app = shallow(<App name='jerry' />);
    const wrapper = app.find('MyCom');
    expect(wrapper.text()).toBe('<MyCom />');
    // expect(wrapper.find('h1').text()).toBe('xixi')
    // Method "text" is meant to be run on 1 node. 0 found instead
    expect(wrapper.dive().find('h1').text()).toBe('xixi')})})Copy the code

Can only be called on the wrapper of a single non-DOM component element node, otherwise an error will be thrown. If you must shallow wrap a wrapper with multiple child nodes, use.shallow().

Shallow does not render out the child component, so it cannot find the contents of the child component, as dive() does.

Jest+Enzyme test React

Environment set up

Preparing the React Project

Setting up the Test Environment

Install dependencies:

Configuration packang. Json:

Jest configuration file

setup.jsfile

. Babelrc file

Write the test

Enzymejs

Commonly used API

.at(index)

.childAt(index)

.find(selector)

findWhere(predicate)

.filter(selector)

.filterWhere(predicate)

.contains(nodeOrNodes)

.containsMatchingElement(node)

.containsAllMatchingElements(nodes)

.containsAnyMatchingElements(nodes)

.equals(node)

.matchesElement(node) => Boolean

.hasClass(className) => Boolean

.is(selector) => Boolean

.exists() => Boolean

.not(selector) => ShallowWrapper

.children() => ShallowWrapper

.childAt(index) => ShallowWrapper

.parents() => ShallowWrapper

.parent() => ShallowWrapper

.closest(selector) => ShallowWrapper

.shallow([options]) => ShallowWrapper

.render() => CheerioWrapper

.unmount() => ShallowWrapper

.text() => String

.html() => String

.get(index) => ReactElement

.at(index) => ShallowWrapper

.first() => ShallowWrapper

.last() => ShallowWrapper

.state([key]) => Any

.context([key]) => Any

.props() => Object

.prop(key) => Any

.key() => String

.simulate(event[, data]) => ShallowWrapper

.setState(nextState) => ShallowWrapper

.setProps(nextProps) => ShallowWrapper

.setContext(context) => ShallowWrapper

.instance() => ReactComponent

.update() => ShallowWrapper

.debug() => String

.type() => String|Function

.name() => String

.forEach(fn) => ShallowWrapper

.map(fn) => Array

.reduce(fn[, initialValue]) => Any

.reduceRight(fn[, initialValue]) => Any

.slice([begin[, end]]) => ShallowWrapper

.tap(intercepter) => Self

.some(selector) => Boolean

.someWhere(predicate) => Boolean

.every(selector) => Boolean

.everyWhere(predicate) => Boolean

.dive([options]) => ShallowWrapper

Related Posts

The understanding of SetTimeout, SetInterVal, setImmediate, and Process. NextTick

Do you really understand the React lifecycle

Vue – cli3 configuration webpack htmlWebpackPlugin

`setup.js`file

`Enzymejs`