How to test methods inside functional component using enzyme as instance() returns null for shallow wrapper? How to test methods inside functional component using enzyme as instance() returns null for shallow wrapper? reactjs reactjs

How to test methods inside functional component using enzyme as instance() returns null for shallow wrapper?


From this docs: https://airbnb.io/enzyme/docs/api/ShallowWrapper/instance.html

NOTE: can only be called on a wrapper instance that is also the root instance. With React 16 and above, instance() returns null for stateless functional components.

Test component behavior, not implementation details.

E.g.

index.jsx:

import React, { useState } from 'react';const Counter = () => {  const [counter, setCounter] = useState(0);  const incCounter = () => {    setCounter(counter + 1);  };  return (    <>      <p>Counter value is: {counter}</p>      <button className="increment" onClick={incCounter}>        Up      </button>    </>  );};export default Counter;

index.spec.jsx:

import React from 'react';import Counter from './';import { shallow } from 'enzyme';describe('Counter', () => {  let counter;  beforeEach(() => {    counter = shallow(<Counter />);  });  it('calls incCounter function when button is clicked', () => {    expect(counter.find('p').text()).toBe('Counter value is: 0');    const incButton = counter.find('button');    incButton.simulate('click');    expect(counter.find('p').text()).toBe('Counter value is: 1');  });});

Unit test result with 100% coverage:

 PASS  src/stackoverflow/59475724/index.spec.jsx (10.045s)  Counter    ✓ calls incCounter function when button is clicked (17ms)-----------|----------|----------|----------|----------|-------------------|File       |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |-----------|----------|----------|----------|----------|-------------------|All files  |      100 |      100 |      100 |      100 |                   | index.jsx |      100 |      100 |      100 |      100 |                   |-----------|----------|----------|----------|----------|-------------------|Test Suites: 1 passed, 1 totalTests:       1 passed, 1 totalSnapshots:   0 totalTime:        11.697s

Source code: https://github.com/mrdulin/jest-codelab/tree/master/src/stackoverflow/59475724