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

Question

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

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

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

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

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

Нормальная функция (неправильный вывод)

console.log src/containers/Example/Example.test.js:18
  false
console.log src/containers/Example/Example.test.js:19
  two
console.log src/containers/Example/Example.test.js:21
  true
console.log 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.log(component.state().active);
  console.log(two.props()["className"]());
  component.setState({active: true});
  console.log(component.state().active);
  console.log(two.props()["className"]());
});

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

• заменить это console.log (two.props () ["className"]); этим console.log (two.props () "className");
• заменить это console.log (two.props () ["className"]); этим console.log (two.props () "className");

Answer 1

Проблема связана не с модульным тестированием, а с использованием функций в JavaScript. Это будет применимо и к производственному применению.

Ожидается, что

onClick prop будет функцией. () => this.style() выражение является функцией. this.style() - это результат вызова style метода, строки.

Поскольку метод style уже привязан к экземпляру компонента (это стрелка), его не нужно переносить другой стрелкой. Должно быть:

<div className={this.style}/>