Проверка правильности условного события в React с Jest и Enzyme - PullRequest
0 голосов
/ 15 февраля 2019

Есть компонент, который обрабатывает некоторые события с заданным реквизитом.С учетом тестовых кодов, я думаю, что юнит-тест удовлетворяет свои потребности.Кроме того, показанный отчет говорит, что в моем компоненте есть непокрытые строки, которые я добавил //coverage в качестве комментария к этим строкам.

component.js

@autobind
  onMouseEnter(e) {
     if (this.props.onMouseEnter) { //coverage
      this.props.onMouseEnter(e); //coverage
      return; //coverage
    }
    this.setState({
      value: e.target
    });
  }

  ...

      <a
        onMouseEnter={e => this.onMouseEnter(e)} //coverage
        {...otherProps}
      >
        {children}
      </a>

component.test.js

describe("LinkButton Component Testing", () => {
  let wrapper;
  let linkbutton;
  let mockMouseEnter;
  beforeAll(() => {
    mockMouseEnter = jest.fn(e => {
      wrapper.setState({ value: e.target });
      return e.target;
    });
    wrapper = mount(
      <Link passHref href="#deneme">
        <LinkButton
          text="Deneme Title"
          data-test="test"
          onMouseEnter={mockMouseEnter}
        >
          <span>Sample Link</span>
        </LinkButton>
      </Link>
    );
    linkbutton = wrapper.find(
      '[data-test="test"]'
    );
  });

  test("testing onmouseenter props with mock function", () => {
    const anchorLink = linkbutton.hostNodes();
    expect(
      anchorLink.props().onMouseEnter
    ).not.toBeUndefined();

    linkbutton.find("a").simulate("mouseenter");
    expect(
      wrapper.children().props().onMouseEnter
    ).toBeTruthy();
    expect(
      mockMouseEnter.mock.results[0].value.text
    ).toEqual("Sample Link");
    expect(
      linkbutton.get(0).props.onMouseEnter.name
    ).toBe("mockConstructor");
    expect(
      mockMouseEnter.mock.calls.length
    ).toEqual(1);
    expect(
      mockMouseEnter.mock.results[0].value.text
    ).toEqual("Sample Link");

    expect(wrapper.state().value.text).toEqual(
      "Sample Link"
    );
    expect(linkbutton.children()).toHaveLength(2);

    wrapper.simulate("mouseleave");
  });

  test("testing onmouseEnter without given prop", () => {
    wrapper.unmount();
    const newWrapper = mount(
      <Link passHref href="#deneme">
        <LinkButton
          text="Deneme Title"
          data-test="test"
        >
          <span>Sample Link</span>
        </LinkButton>
      </Link>
    );

    const newLinkbutton = newWrapper.find(
      '[data-test="test"]'
    );
    debugger;
    expect(
      newLinkbutton.get(0).props.onMouseEnter
    ).toBeUndefined();
    expect(newWrapper.state()).toBeNull();
  });
});

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...