reactjs - 如何测试依赖于 useContext 钩子的反应组件?
问题描述
我有一个使用的组件,useContext
然后它的输出取决于上下文中的值。一个简单的例子:
import React, { useContext } from 'react';
const MyComponent = () => {
const name = useContext(NameContext);
return <div>{name}</div>;
};
使用 react 和 jest 快照中的浅渲染器测试此组件时。如何更改 的值NameContext
?
解决方案
一般来说,使用钩子不应该改变太多的测试策略。这里更大的问题实际上不是钩子,而是上下文的使用,这使事情变得有点复杂。
有很多方法可以使这项工作,但我发现唯一可行的方法'react-test-renderer/shallow'
是注入一个模拟钩子:
import ShallowRenderer from 'react-test-renderer/shallow';
let realUseContext;
let useContextMock;
// Setup mock
beforeEach(() => {
realUseContext = React.useContext;
useContextMock = React.useContext = jest.fn();
});
// Cleanup mock
afterEach(() => {
React.useContext = realUseContext;
});
test("mock hook", () => {
useContextMock.mockReturnValue("Test Value");
const element = new ShallowRenderer().render(
<MyComponent />
);
expect(element.props.children).toBe('Test Value');
});
不过,这有点脏,而且是特定于实现的,所以如果您能够在使用浅渲染器时做出妥协,还有其他一些可用的选项:
非浅渲染
如果您不是浅层渲染,则可以将组件包装在上下文提供程序中以注入您想要的值:
import TestRenderer from 'react-test-renderer';
test("non-shallow render", () => {
const element = new TestRenderer.create(
<NameContext.Provider value="Provided Value">
<MyComponent />
</NameContext.Provider>
);
expect(element.root.findByType("div").children).toEqual(['Provided Value']);
});
(免责声明:这应该可以,但是当我测试它时,我遇到了一个错误,我认为这是我的设置中的一个问题)
使用 Enzyme 和 Dive 进行浅渲染
正如@skyboyer 评论的那样,酶的浅渲染器支持.dive
允许您深度渲染原本浅渲染组件的一部分:
import { shallow } from "./enzyme";
test("enzyme dive", () => {
const TestComponent = () => (
<NameContext.Provider value="Provided Value">
<MyComponent />
</NameContext.Provider>
);
const element = shallow(<TestComponent />);
expect(element.find(MyComponent).dive().text()).toBe("Provided Value");
});
使用 ReactDOM
最后,Hooks FAQ有一个使用 测试钩子的例子ReactDOM
,它也很有效。当然,使用ReactDOM
意味着这也是一个深度渲染,而不是浅层。
let container;
beforeEach(() => {
container = document.createElement('div');
document.body.appendChild(container);
});
afterEach(() => {
document.body.removeChild(container);
container = null;
});
test("with ReactDOM", () => {
act(() => {
ReactDOM.render((
<NameContext.Provider value="Provided Value">
<MyComponent />
</NameContext.Provider>
), container);
});
expect(container.textContent).toBe("Provided Value");
});
推荐阅读
- javascript - 使用 vanilla javascript 路由显示动态元素
- python - 为什么在 YOLOv5 中这两个结果不同?
- java - 在 Android Studio 中选择图像后应用退出(未调用 OnActivityResult)
- javascript - 从事件监听器传递字符串数组时,它会抛出一个错误,如下所示
- webpack - 如何将 webpack-dev-server 与 nodemon-webpack-plugin 一起使用?
- python - Python SQL 查询执行
- javascript - MUI 输入不允许 oninput 属性
- postman-testcase - 邮递员如何使用正则表达式读取隐藏字段的值
- python - 将一个元素转换为一个元素的元组/列表/集合/字符串的简洁通用方法
- makefile - Vasp 6.2.1 未编译