i具有使用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']);
});
（免责声明：此应该工作，但是当我测试时，我遇到了一个错误，我认为这是我的设置中的问题）
浅渲染用酶和潜水
正如@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
最后，钩子常见问题解答具有用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");
});
我尝试使用酶 .dive，但是当潜水时，它无法识别上下文道具，它会得到默认的。实际上，这是酶团队已知的问题。同时，我提出了一个更简单的解决方案，该解决方案包括创建一个自定义挂钩，只是在您的上下文中返回useContext并模拟了测试中此自定义钩的返回：
appContext.js-创建上下文。
import React, { useContext } from 'react';
export const useAppContext = () => useContext(AppContext);
const defaultValues = { color: 'green' };
const AppContext = React.createContext(defaultValues);
export default AppContext;
app.js - 提供上下文
import React from 'react';
import AppContext from './AppContext';
import Hello from './Hello';
export default function App() {
return (
<AppContext.Provider value={{ color: 'red' }}>
<Hello />
</AppContext.Provider>
);
}
hello.js-消费上下文
import React from 'react';
import { useAppContext } from './AppContext';
const Hello = props => {
const { color } = useAppContext();
return <h1 style={{ color: color }}>Hello {color}!</h1>;
};
export default Hello;
hello.test.js-用酶浅
测试UseContextimport React from 'react';
import { shallow } from 'enzyme';
import * as AppContext from './AppContext';
import Hello from './Hello';
describe('<Hello />', () => {
test('it should mock the context', () => {
const contextValues = { color: 'orange' };
jest
.spyOn(AppContext, 'useAppContext')
.mockImplementation(() => contextValues);
const wrapper = shallow(<Hello />);
const h1 = wrapper.find('h1');
expect(h1.text()).toBe('Hello orange!');
});
});
检查完整的中等文章https://medium.com/7shifts-eendingering-blog/testing-usecontext-react-react-hook-with-with-enzyme-shallow-da062140fc83
，或者，如果您在隔离内测试组件而不安装父组件，则可以简单地模拟usecontext：
jest.mock('react', () => {
const ActualReact = jest.requireActual('react')
return {
...ActualReact,
useContext: () => ({ }), // what you want to return when useContext get fired goes here
}
})
要完成上述接受的答案，对于非摇摆渲染，我稍微调整了代码，以简单地用上下文包围我的组件
import { mount } from 'enzyme';
import NameContext from './NameContext';
test("non-shallow render", () => {
const dummyValue = {
name: 'abcd',
customizeName: jest.fn(),
...
};
const wrapper = mount(
<NameContext.Provider value={dummyValue}>
<MyComponent />
</NameContext.Provider>
);
// then use
wrapper.find('...').simulate('change', ...);
...
expect(wrapper.find('...')).to...;
});
旧帖子，但是如果它对某人有帮助，这就是我的工作方式
import * as React from 'react';
import { shallow } from 'enzyme';
describe('MyComponent', () => {
it('should useContext mock and shallow render a div tag', () => {
jest.spyOn(React, 'useContext').mockImplementation(() => ({
name: 'this is a mock context return value'
}));
const myComponent = shallow(
<MyComponent
props={props}
/>).dive();
expect(myComponent).toMatchSnapShot();
});
});
在测试中，您需要用"上下文提供者"包装组件。这是一个简单的例子。
displayInfo组件取决于usercontext。
import React, { useContext } from 'react';
import { UserContext } from './contexts/UserContextProvider';
export const DisplayInfo = () => {
const { userInfo } = useContext(UserContext);
const dispUserInfo = () => {
return userInfo.map((user, i) => {
return (
<div key={i}>
<h1> Name: { user.name } </h1>
<h1> Email: { user.email } </h1>
</div>
)
});
}
return(
<>
<h1 data-testid="user-info"> USER INFORMATION </h1>
{ userInfo && dispUserInfo() })
</>
}
export default DisplayInfo;
这是用户上下文提供商。
import React, {useState, createContext} from 'react';
export const UserContext = createContex();
const UserContextProvider = () => {
const [userInfo, setUserInfo] = useState([]);
const updateUserInfo = () => {
setUserInfo([...userInfo, newData]);
}
const values = {
userInfo,
updateUserInfo
}
return(
<UserContext.Provider = vlaue={values}>
{props.children}
</UserContext.Provider>
)
}
export default UserContextProvider;
测试" DisplayInfo"综合，也可能需要使用" MemoryRouter"。来自" React-Router-dom"。这是一个示例 -
import React from "react";
import { render, screen } from "@testing-library/react";
import "@testing-library/jest-dom/extend-expect";
import { DisplayInfo } from "./DisplayInfo";
import UserContextProvider from "./contexts/UserContextProvider";
import { MemoryRouter } from "react-router-dom";
describe("DisplayInfo", () => {
describe("layout", () => {
it("has header of user info", () => {
render(
<UserContextProvider>
<DisplayInfo />
</UserContextProvider>,
{ wrapper: MemoryRouter }
);
let header = screen.getByTestId('user-info');
expect(header).toHaveTextContent(/user information/i)
});
});
});
我所做的是测试如果使用了useContext。就我而言，useContext返回称为dispatch的函数。
在组件中：
const dispatch = useContext(...);
，然后在onChange方法中：
dispatch({ type: 'edit', payload: { value: e.target.value, name: e.target.name } });
因此在开始测试中：
const dispatch = jest.fn();
React.useContext = (() => dispatch) as <T>(context: React.Context<T>) => T;
，然后：
it('calls function when change address input', () => {
const input = component.find('[name="address"]');
input.simulate('change', { target: { value: '123', name: 'address' } });
expect(dispatch).toHaveBeenCalledTimes(1);
});
我找到了一种可口的方式来模拟上下文，我可以优雅地注入自己的测试值。
import React, {
createContext,
useContext,
useState,
useEffect,
} from "react";
const initState = {
data: [],
};
export const ThingsContext = createContext(initState);
export const useThings = () => {
const data = useContext(ThingsContext);
if (data === undefined) {
throw new Error("useThing must be used within a ThingsProvider");
}
return data;
};
export const ThingsProvider = ({
children,
value: { state: oState } = {},
}) => {
const[data, setData] = useState();
useEffect(() => {
const getData = async () => {
const data = await // api call;
setData(data);
}
getData();
}, []);
return (
<ThingsContext.Provider
value={{ state: oState ?? state }}
>
{children}
</ThingsContext.Provider>
);
};
这样，我可以覆盖实际状态并测试我想要的任何值。
import React from "react";
import { render, screen } from "@testing-library/react";
import { ThingsProvider } from "store/things";
import Things from "./Things";
const defaultValue = {
state: ["pot", "kettle", "black"],
};
const renderComponent = (children, value=defaultValue) => {
const el = render(
<ThingsProvider value={value ?? defaultValue} >{children}</ThingsProvider>
);
screen.debug();
return el;
};
describe("<Things />", () => {
it("should render thing", () => {
renderComponent(<Things />);
});
expect(screen.getByText("pot")).toBeInTheDocument();
it("should not render thing", () => {
renderComponent(<Things />, {state: []});
});
expect(screen.queryByText("pot")).not.toBeInTheDocument();
});