Question

我的组件（<NavItems />）：

<Fragment>
    <Nav>
        {items.map((item, i) => (
            <NavItem key={i} url={item} />
        ))}
    </Nav>
</Fragment>

在我的测试中，我想检查我的组件<NavItems />是否包含具有特定<NavItem />道具的url组件，例如'/login'。

问题是我不关心key道具的价值，它不应该是测试的一部分。

如何测试？

提前致谢。

Answer 1

您可以查看所需的道具。您正在寻找的方法很可能是findWhere。像下一个代码那样的东西应该做的伎俩

const wrapper = shallow(<NavItems />)
const nav = wrapper.shallow()

expect(nav.findWhere(el => el.is(NavItem) && el.prop('url') === '/login').length).toEqual(1)

这里的主要部分是expect，您可以在其中准确检查您想要的内容。别忘了通过items阵列。

使用mount，您可以避免使用多个shallow，但不要忘记内存更多重操作，并将整个反应树呈现使用生命周期方法。

Answer 2

const wrapper = mount(<NavItems />);
expect(wrapper.find(NavItem).filterWhere((item) => {
  return item.prop('url') === '/login'
}).to.have.lengthOf(1);

这也适用于shallow()

反应酶 - 测试特定支柱的价值

2 个答案: