一般来说，使用钩子不应该改变太多的测试策略。这里更大的问题实际上不是钩子，而是上下文的使用，这使事情变得有点复杂。
有很多方法可以使这项工作，但我发现与'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");
});