我有一个使用 useContext
的组件,然后它的输出取决于上下文中的值。一个简单的例子:
import React, { useContext } from 'react';
const MyComponent = () => {
const name = useContext(NameContext);
return <div>{name}</div>;
};
使用 React 和 jest 快照的浅层渲染器测试此组件时。如何更改 NameContext
的值?
最佳答案
一般来说,使用钩子(Hook)不会改变测试策略太多。这里更大的问题实际上不是钩子(Hook),而是上下文的使用,这使事情变得有点复杂。
有很多方法可以实现此目的,但我发现唯一适用于 'react-test-renderer/shallow'
的方法是注入(inject)模拟钩子(Hook):
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');
});
不过,这有点脏,并且特定于实现,因此如果您能够在浅渲染器的使用上妥协,还有一些其他选项可用:
非浅渲染
如果您不进行浅层渲染,您可以将组件包装在上下文提供程序中以注入(inject)您想要的值:
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 所评论的,Enzyme 的浅渲染器支持 .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
测试 hooks 的示例,它也有效。当然,使用 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");
});
关于reactjs - 如何测试依赖于 useContext hook 的 React 组件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54691799/