api-react
React specialty
React context
When you want to test component that use a context, you can set while shallow the context using externals
shallow constructor option.
The contexts
object can contain two values:
id
: the same context identifier as in useContext.value
: the value of the context. You can give object, string, array, it's what you want to test.
Example with jest
const ThemeContext = React.createContext('light');
const ThemedButton = () => {
const context = React.useContext(ThemeContext);
return <div>{context}</div>;
};
const cmp = shallow(<ThemedButton/>, {
externals: {
contexts: [
{id: ThemeContext, value: 'dark'}
]
}
});
expect(cmp.html()).toBe(
'<div>dark</div>'
);
Note: As react doesn't provide a better way to identify context, you have to import the real context in your test. If there is an other way to identify context, fill an issue and the API will be improved.
useDebugValue() hook
If you want to test that your component use this hook, you can set the debug option to true.
If the option is at true, useDebugValue will call console.debug
function.
Example with jest
it('should call console.debug', () => {
console.debug = jest.fn();
const Component = () => {
React.useDebugValue('need to be logged');
return <div />;
};
shallow(<Component />, {
debug: true
});
expect(console.debug).toHaveBeenCalled();
});