Функция тестирования React Unit vs ArrowFunction

У меня простая страница с двумя div. Цвет фона второго div зависит от состояния активного свойства. Если активный истинно, тогда он должен использовать класс .active из файла CSS, иначе использовать стиль .два.

Я написал модульный тест для этого сценария, чтобы проверить, изменился ли стиль второго div после изменения состояния.

Я понял одну вещь: когда я выполняю функцию стиль(), чтобы получить правильное имя стиля, модульный тест не работает, и мой стиль во втором div не обновляется. Но когда я выполняю стиль как стрелочную функцию, все работает. Кто-нибудь из вас знает, почему это происходит? в чем проблема с вызовом функции нормальный? почему render () не вызывается?

Вывод на консоль стрелочной функции (ожидается)

console.info src/containers/Example/Example.test.js:18
  false
console.info src/containers/Example/Example.test.js:19
  two
console.info src/containers/Example/Example.test.js:21
  true
console.info src/containers/Example/Example.test.js:22
  active

Нормальная работа (неправильный вывод)

console.info src/containers/Example/Example.test.js:18
  false
console.info src/containers/Example/Example.test.js:19
  two
console.info src/containers/Example/Example.test.js:21
  true
console.info src/containers/Example/Example.test.js:22
  two

Компонент с функцией стрелки

При замене () => this.style () на this.style () модульный тест завершится ошибкой.

import React, {Component} from 'react';
import styles from './Example.module.css';

class Example extends Component {

  state = {
    active: false
  };

  active = () => {
    this.setState({active: !this.state.active});
  };

  style = () => {
    return this.state.active ? styles.active : styles.two;
  };

  render() {
    return (
        <div>
          <div onClick = {() => this.active()} className = {styles.one}/>
          <div className = {() => this.style()}/>
        </div>
    );
  }
}

export default Example;

Модульный тест для компонента

import React from 'react';
import Adapter from 'enzyme-adapter-react-16';
import {configure, mount} from 'enzyme';
import styles from './Example.module.css';

import Example from './Example';

configure({adapter: new Adapter()});

let component;

beforeEach(() => {
  component = mount(<Example/>);
});

it('description', () => {
  let two = component.find('div').at(2);
  console.info(component.state().active);
  console.info(two.props()["className"]());
  component.setState({active: true});
  console.info(component.state().active);
  console.info(two.props()["className"]());
});

Для второго случая this.style () вам нужно немного изменить вывод консоли

• замените этот console.info (two.props () ["имя класса"]); на этот console.info (two.props () "имя класса");
• замените этот console.info (two.props () ["имя класса"]); на этот console.info (two.props () "имя класса");