如何使用 jest /enzyme 为 Link 添加测试用例

Question

我正在尝试使用 jest 和 enzyme 编写一些测试用例，我无法为 Link 添加测试用例，请建议是否需要添加更多测试用例

这些是有样式的组件，我们什么时候应该监视 /mock 函数

displayErr.tsx

export const DisplayErr = React.memo<Props>(({ text, SearchLink }) => (
    <Section>
      <h1>{text}</h1>

      {!SearchLink && <Link to={getPath('SEARCH')}>some text</Link>}
    </Section>
));

displayErr.test.tsx

describe('Error Msg', () => {
  it('styled component', () => {
    const output = mount(<DisplayErr text="hello world" SearchLink={true} />);
    const link = output.find(Link).find({ to: '/Search' });
    expect(output.find(Section).text()).toEqual('hello world');
    //expect(link).toBe('<div class="link">Login</div>');//error
  });
});

Answer 1

此处 Link 将根据 SearchLink 道具进行渲染。当您将其作为 true 传递时，它不会在 DOM 中可用。通过 SearchLink=false 并执行单元测试。

describe('Error Msg', () => {
       it('styled component', () => {
       const output = mount(<DisplayErr text="hello world" SearchLink=false/>)
      expect(output.find(Link).props().to).toEqual('/search');
    });

如果您遇到同样的问题，请告诉我。

如何使用 jest /enzyme 为 Link 添加测试用例

How to add test cases for Link using jest /enzyme

reactjs

jestjs

enzyme