Question

我具有以下onClick功能

onClickFunction= index => () => {
  this.setState({ activeIndex: index });
}

在以下功能中使用了

getPersons= (persons) => persons
  .map((person, index) => (
     <StyledComponentHeader
        key...
        ...
        onClick={this.onClickFunction(index)}
      >
        <Styled2
          ...
        >
          {person.name}
        </Styled2>
      </StyledComponentHeader>
    ))

在单元测试中，我需要测试onClickFunction。目前我有这样的东西

const component= (
  <StyledComponent
    persons={persons}
  />);

describe('...', () => {
  beforeEach(() => {
    wrapper = shallow(component);
});

it('testing name', () => {
  expect(wrapper).toMatchSnapshot();
  expect(wrapper.state().activeIndex).toEqual(0);
  wrapper.instance().onClickFunction(1);
  expect(wrapper.state().activeIndex).toEqual(1);
});

它返回上面的except应该为0。测试此功能的正确方法是什么？

Answer 1

由于onClickFunction不会更改状态，但是会返回一个函数，如果调用该函数会更改状态，则逻辑方法是使用

进行测试

wrapper.instance().onClickFunction(1)();

（请注意最后添加的()来调用返回的函数）

用Jest javascript测试功能

1 个答案: