событие изменения имитации фермента не работает над флажком - PullRequest
Новая
       5

событие изменения имитации фермента не работает над флажком

0 голосов
/ 16 марта 2020

Я пытаюсь написать модульный тест для одного из моих реагирующих компонентов. Но мой флажок не изменяется после имитации события изменения над ним.

Мой компонент: 

const Checkbox = ({ label, onChange, id, isChecked }) => {
    return (
      <>
        <input type="checkbox" 
               name="node" 
               id={"checkbox-" + id}
               onChange={onChange} 
               checked={isChecked}
               />
        <label className="treeview__level" htmlFor={"checkbox-" + id}>{label}</label>
      </>
    )

Мой тест: 

it('check if checkbox checked ', () => {
    const   testState = { isChecked: false },
            checkboxWrapper = shallow(
                <Checkbox   label= ""
                            id= "0"
                            onChange={(e) => {
                                testState[e.target.name] = e.target.value;
                            }}
                            isChecked= {testState.isChecked}
                />
            ),
            input = checkboxWrapper.find('input').at(0);

        input.simulate('change', { target: { name: 'checked', value: true } });
        expect(input.props().checked).toBe(true);

    })

1 Ответ

0 голосов
/ 18 марта 2020

Работает как положено. В настоящий момент компонент визуализируется поверхностно, значение реквизита isChecked равно false (значение testState.isChecked), даже если вы моделируете событие change. Вы только что изменили значение свойства testState. Компонент не перерисовывается. Вот почему input.props().checked дает вам значение false.

Вы можете использовать .setProps (nextProps [, callback]) => Self для обновления реквизитов компонента.

Например: index.tsx: 

import React from 'react';

export const Checkbox = ({ label, onChange, id, isChecked }) => {
  console.log('isChecked:', isChecked);
  return (
    <>
      <input type="checkbox" name="node" id={'checkbox-' + id} onChange={onChange} checked={isChecked} />
      <label className="treeview__level" htmlFor={'checkbox-' + id}>
        {label}
      </label>
    </>
  );
};

index.test.tsx: 

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

describe('60708551', () => {
  it('check if checkbox checked ', () => {
    const testState = { isChecked: false };
    const checkboxWrapper = shallow(
      <Checkbox
        label=""
        id="0"
        onChange={(e) => {
          testState[e.target.name] = e.target.value;
        }}
        isChecked={testState.isChecked}
      />,
    );
    const input = checkboxWrapper.find('input');
    input.simulate('change', { target: { name: 'isChecked', value: true } });
    expect(testState.isChecked).toBeTruthy();
    checkboxWrapper.setProps({ isChecked: testState.isChecked });
    expect(checkboxWrapper.find('input').props().checked).toBeTruthy();
  });
});

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

 PASS  stackoverflow/60708551/index.test.tsx (13.81s)
  60708551
    ✓ check if checkbox checked  (43ms)

  console.log stackoverflow/60708551/index.tsx:4
    isChecked: false

  console.log stackoverflow/60708551/index.tsx:4
    isChecked: true

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        15.316s

исходный код: https://github.com/mrdulin/react-apollo-graphql-starter-kit/tree/master/stackoverflow/60708551

...