Как использовать API .contains (nodeOrNodes), когда содержащийся в нем элемент реагирования имеет обработчик событий функции стрелки? - PullRequest
Новая
       8

Как использовать API .contains (nodeOrNodes), когда содержащийся в нем элемент реагирования имеет обработчик событий функции стрелки?

0 голосов
/ 24 января 2020

Для приведенного ниже примера .contains (nodeOrNodes) => Логический API работает нормально.

index.tsx: 

import React from 'react';

const Comp = ({ onChange }) => (
  <form>
    <input type="text" placeholder="username" onChange={onChange} />
  </form>
);

export default Comp;

index.test.tsx: 

import React from 'react';
import { shallow } from 'enzyme';
import Comp from '.';

describe('Comp', () => {
  it('should render', () => {
    const noop = () => null;
    const wrapper = shallow(<Comp onChange={noop} />);
    expect(
      wrapper.contains(
        <form>
          <input type="text" placeholder="username" onChange={noop} />
        </form>,
      ),
    ).toBeTruthy();
  });
});

Результаты модульного теста: 

 PASS  src/stackoverflow/46133847/02/index.test.tsx
  Comp
    ✓ should render (13ms)

-----------|----------|----------|----------|----------|-------------------|
File       |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
-----------|----------|----------|----------|----------|-------------------|
All files  |      100 |      100 |      100 |      100 |                   |
 index.tsx |      100 |      100 |      100 |      100 |                   |
-----------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        7.754s, estimated 24s

Но, если я изменю обработчик события onChange, используя функцию стрелки:

index.ts: 

import React from 'react';

const Comp = ({ onChange }) => (
  <form>
    <input type="text" placeholder="username" onChange={(e) => onChange(e)} />
  </form>
);

export default Comp;

Модульный тест не пройден. 

 FAIL  src/stackoverflow/46133847/02/index.test.tsx
  Comp
    ✕ should render (18ms)

  ● Comp › should render

    expect(received).toBeTruthy()

    Received: false

      13 |         </form>,
      14 |       ),
    > 15 |     ).toBeTruthy();
         |       ^
      16 |   });
      17 | });
      18 | 

      at Object.it (src/stackoverflow/46133847/02/index.test.tsx:15:7)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        7.689s, estimated 25s

Я думаю, что тест не пройден, потому что функция стрелки создала новую ссылку на функцию. Эта новая функция имеет другую ссылку с функцией noop, переданной в Comp.

Но я хочу, есть ли способ, подобный expect.any(Function) из jestjs, просто чтобы утверждать, действительно ли wrapper содержит какую-либо функцию onChange обработчик событий?

Варианты комплектации: 

"enzyme": "^3.10.0",
"jest": "^24.9.0",

1 Ответ

0 голосов
/ 03 февраля 2020

Если честно, я не думаю, что использование .contains (nodeOrNodes) - хороший способ для этой ситуации.

Далее следуют мои личные предложения: 

 let inputComponent = wrapper.find("input[placeholder]='username'");
 expect(inputComponent.length).toBe(1); // This tests your component is exists rather than contains)
 expect(inputComponent.props().onChange).toEqual(noop); //This tests onChange function  is equal your mock function

Пожалуйста, проголосуйте, если это работает для вас

...