代码之家 › 专栏 › 技术社区 › Enrique Moreno Tent

使用上下文使用者对组件进行单元测试

react-context enzyme jestjs unit-testing reactjs

Enrique Moreno Tent · 技术社区 · 6 年前

class Foo extends React.Component {
    render() {
        return (
            <div className="Foo">
                <div id="user">Bar</div>
                <SomeOtherComponent />
            </div>
        )
    }
}

这个测试:

it('renders a help button', () => {
  expect(shallow(<Foo />).find('#user').length).toEqual(1);
});

但现在我已经向这个对象添加了一个上下文使用者:

class Foo extends React.Component {
    render() {
        return (
            <UserContext.Consumer>
                {({user}) => (
                    <div className="Foo">
                        <div id="user">{user}</div>
                        <SomeOtherComponent />
                    </div>
                )}
            </UserContext.Consumer>
        )
    }
}

“#user”的数量为1
显示的用户就是提供的用户

1 回复 | 直到 6 年前

Herman Starikov 6 年前

你可以嘲笑 UserContext.Consumer 使用某个硬编码用户进行渲染。不知道如何导出 UserContext ,但看起来是这样的:

jest.mock('path/to/UserContextModule', () => ({
  UserContext: {
    Consumer: ({children}) => children({user: 'User'})
  }
}))

你剩下的测试将保持不变。

推荐文章

Albert Olivé Corbella · 如何使用渲染道具使用Jest正确模拟React组件

7 年前

blankface · 检查Jest中我的组件上是否存在可选道具

7 年前

Leff · 测试react组件的子级数

7 年前

softshipper · 如何基于物料ui测试组件?

7 年前

Liutong Chen · 编写酶测试时何时使用“Component.WrappedComponent”

7 年前

The Walrus · 检查初始函数promise中promise后的状态

7 年前

Lennert Hofman · 如何在酶中等待来自私人功能的承诺?

7 年前

Yuriy · 将全局包与TypeScript一起使用的正确方法是什么?

7 年前

Atul kumar singh · 创建React应用程序,由于1个错误,所有测试用例都失败

7 年前

Riley Bracken · 未运行Jest/酶映像onload回调

7 年前