For abstraction purpose, the app I work on has a custom provider that wraps a couple of other providers (like IntlProvider and CookiesProvider). The version of react-intl we use in our app is still v2 (react-intl#2.8.0). A simplified version of my App.js is:
App.js
return (
<Provider
value={{
localeData,
env,
data
}}>
<IntlProvider locale={language} key={language} messages={allMessages}>
{props.children}
</IntlProvider>
</Provider>
)
I have setup a custom render to test components in my app. My custom render looks exactly as it is specified in the react-intl-docs. I have followed the official setup guides from react-testing-library.
import React from "react";
import {render} from "#testing-library/react";
import {MyProvider} from "MyProvider";
const MyTestProvider = ({children}) => {
return <MyProvider>{children}</MyProvider>;
};
const myTestRender = (ui, options) => render(ui, {wrapper: MyTestProvider, ...options});
export * from "#testing-library/react";
export {myTestRender as render};
I then render my component under test as follows:
import {render as renderSC} from "test-utils";
import MyComponentUnderTest from 'MyComponentUnderTest';
test("does my component render", () => {
const {getByText} = renderSC(<MyComponentUnderTest />);
});
I get an error from react-intl which indicates it is warning, but the component that is rendered in test is empty.
console.error
Warning: IntlProvider.shouldComponentUpdate(): Returned undefined instead of a boolean value. Make sure to return true or false.
This is what my component renders in test:
<body>
<div />
</body>
Is anyone able to advise what I might be doing wrong?
I think your exports make this problem, try these instead:
import React from "react";
import {render} from "#testing-library/react";
import {MyProvider} from "MyProvider";
const MyTestProvider = ({children}) => {
return <MyProvider>{children}</MyProvider>;
};
const myTestRender = (ui, options) => render(ui, {wrapper: MyTestProvider, ...options});
export default myTestRender;
and then use your custom renderer this way:
import renderSC from "test-utils";
import MyComponentUnderTest from 'MyComponentUnderTest';
test("does my component render", () => {
const {getByText} = renderSC(<MyComponentUnderTest />);
});
So I was able to confirm that nothing was wrong with testing-library or with react-intl. The problem was the app I work on had a module mock that mocked out the functionality of react-intl. This was done for convenience when working with unit tests with Enzyme. However this module mock was stripping out all functionality I needed for IntlProvider and that was the reason I was seeing an empty div when I render the testing-library test with a wrapper.
Related
I have one component that that use one customized hook and I need to write some test and make sure I mock the hook. How can I mock the customized hook to have unit test for my component like the code of hook does not even exist?
import "./styles.css";
import useAPICall from "#src/hooks/useAPICall ";
export default function App() {
const { onAPICall } = useAPICall(123);
const handleOnClick = useCallback(() => {
onAPICall();
});
return (
<div className="App">
<button onClick={handleOnClick}>Click</button>
</div>
);
}
///test.tsx all I know is this. but I am not sure how I can use mockImplementation that does not return anything
jest.mock('#src/hooks/useAPICall', () => ({
onAPICall: () => jest.fn(),
}));
You can do it in three simple steps:
Import the module which you want to mock
Then mock the module
Provide the return value of the mocked module.
import React from 'react';
import { render } from '#testing-library/react';
import userEvent from '#testing-library/user-event';
import App from './App';
import useAPICall from "#src/hooks/useAPICall "; // 1st step
jest.mock('#src/hooks/useAPICall'); //2nd step
test('can call useAPICall hook', () => {
useAPICall.mockReturnValue({ onAPICall: jest.fn() }); // 3rd step
const { getByRole } = render(<NewApp />);
userEvent.click(getByRole('button'));
expect(useAPICall).toBeCalled();
});
I'm quite new to testing so try to be gentle! I am trying to set up react-testing-library and I'm stuck with a confusing error message:
I defined a custom renderer that contains all my providers incl. redux Provider:
import React from 'react';
import { render } from '#testing-library/react'
import { ThemeProvider } from 'styled-components';
import { defaultTheme } from 'shared/theme';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from 'reducers';
const store = createStore(rootReducer, applyMiddleware(thunk));
const AllTheProviders = ({ children }) => {
return (
<Provider store={store}>
<ThemeProvider theme={defaultTheme}>
{children}
</ThemeProvider>
</Provider>
)
}
const customRender = (ui, options?) =>
render(ui, { wrapper: AllTheProviders, ...options })
// re-export everything
export * from '#testing-library/react'
// override render method
export { customRender as render }
But when trying to execute the test I am receiving the error Message:
Error: Uncaught [Invariant Violation: Could not find "store" in the
context of "Connect(withRouter(Header))". Either wrap the root
component in a , or pass a custom React context provider to
and the corresponding React context consumer to
Connect(withRouter(Header)) in connect options.]
As far as I can see, I included the store. Is there a way around this?
This question is not a duplicate of: Invariant Violation: Could not find "store" in either the context or props of "Connect(SportsDatabase)"
Since it involves a global renderer.
The store needs to be mocked in order to test properly. I suggest to use redux-mock-store library to achieve that but it's up to your preference.
What I would try in your case is the following in the test file:
import configureMockStore from 'redux-mock-store';
const mockStore = configureMockStore();
const store = mockStore({ /* here you can create a mock object for the reducer */ });
it('renders without crashing', () => {
const div = document.createElement('div');
ReactDOM.render(<Provider store={store}>
{ /* your components */ }
</Provider>, div);
ReactDOM.unmountComponentAtNode(div);
});
I hope this gives you the idea and helps!
In jest, what is the difference between using shallow & render from enzyme?
Here is an example of both:
Test rendering with shallow:
import "jest";
import * as React from "react";
import { shallow } from "enzyme";
import Item from "../item.component";
describe("Item", () => {
it("renders correct", () => {
const item = {
name: "A"
};
const component = shallow(
<Item item={item}/>
);
expect(component).toMatchSnapshot();
});
});
Test rendering with render
import "jest";
import * as React from "react";
import { render } from "enzyme";
import Item from "../item.component";
describe("Item", () => {
it("renders correct", () => {
const item = {
name: "A"
};
const component = render(
<Item item={item}/>
);
expect(component).toMatchSnapshot();
});
});
What are the typical usage of these 2. I wrote all my tests with shallow, should I go back and change that to render in some cases?
shallow and render are specific to Enzyme, which can be used independently from Jest.
shallow renders only top-level component and doesn't require DOM. It is intended for isolated unit tests.
render renders the entire component, wraps it with Cheerio, which is jQuery implementation for Node.js. It is intended for blackbox integration/e2e tests with the aid of jQuery-like selectors. It may have is uses but shallow and mount are commonly used.
Neither of them are supposed to be used with toMatchSnapshot, at least without additional tools (enzyme-to-json for shallow and mount).
I'm trying to write a Jest unit test for a component that uses React.Suspense.
Simplified versions of my component modules under test:
MyComponent.js
import React from 'react';
export default () => <h1>Tadaa!!!</h1>;
MySuspendedComponent.js
import React, { Suspense } from 'react';
import MyComponent from './MyComponent';
export default () => (
<Suspense fallback={<div>Loading…</div>}>
<MyComponent />
</Suspense>
);
Naïvely, in my first attempt, I wrote a unit test that uses Enzyme to mount the suspended component:
MySuspendedComponent.test.js
import React from 'react';
import { mount } from 'enzyme';
import MySuspendedComponent from './MySuspendedComponent';
test('the suspended component renders correctly', () => {
const wrapper = mount(<MySuspendedComponent />);
expect(wrapper.html()).toMatchSnapshot();
});
This causes the test to crash with the error message:
Error: Enzyme Internal Error: unknown node with tag 13
Searching for the error message on the web, I found that this is most likely caused by Enzyme not being ready to render Suspense (yet).
If I use shallow instead of mount, the error message changes to:
Invariant Violation: ReactDOMServer does not yet support Suspense
My next attempt was to mock out Suspense with a dummy pass-through component, like this:
MySuspendedComponent.test.js
import React from 'react';
import { mount } from 'enzyme';
import MySuspendedComponent from './MySuspendedComponent';
jest.mock('react', () => {
const react = require.requireActual('react');
return () => ({
...react,
Suspense({ children }) {
return children;
}
});
});
test('the suspended component renders correctly', () => {
const wrapper = mount(<MySuspendedComponent />);
expect(wrapper.html()).toMatchSnapshot();
});
The idea is to have a mock implementation of the React module that contains all the actual code from the React library, with only Suspense being replaced by a mock function.
I've used this pattern with requireActual, as described in the Jest documentation, successfully in other unit tests when mocking other modules than React, but with React, it does not work.
The error I get now is:
TypeError: (($_$w(...) , react) || ($$w(...) , _load_react(...))).default.createElement is not a function
…which, I assume, is caused by the original implementation of React not being available after my mocking trick.
How can I mock out Suspense while leaving the rest of the React library intact?
Or is there another, better way to test suspended components?
The solution is not to use object spreading to export the original React module, but simply overwriting the Suspense property, like this:
MySuspendedComponent.test.js
import React from 'react';
import { mount } from 'enzyme';
import MySuspendedComponent from './MySuspendedComponent';
jest.mock('react', () => {
const React = jest.requireActual('react');
React.Suspense = ({ children }) => children;
return React;
});
test('the suspended component renders correctly', () => {
const wrapper = mount(<MySuspendedComponent />);
expect(wrapper.html()).toMatchSnapshot();
});
This creates the following snapshot, as expected:
MySuspendedComponent.test.js.snap
exports[`the suspended component renders correctly 1`] = `"<h1>Tadaa!!!</h1>"`;
I needed to test my lazy component using Enzyme. Following approach worked for me to test on component loading completion:
const myComponent = React.lazy(() =>
import('#material-ui/icons')
.then(module => ({
default: module.KeyboardArrowRight
})
)
);
Test Code ->
//mock actual component inside suspense
jest.mock("#material-ui/icons", () => {
return {
KeyboardArrowRight: () => "KeyboardArrowRight",
}
});
const lazyComponent = mount(<Suspense fallback={<div>Loading...</div>}>
{<myComponent>}
</Suspense>);
const componentToTestLoaded = await componentToTest.type._result; // to get actual component in suspense
expect(componentToTestLoaded.text())`.toEqual("KeyboardArrowRight");
This is hacky but working well for Enzyme library.
I am just setting out to set up my tests since updating to react v15.5.0 I believe that they have done a lot to bring all of the testing in-house as it were. So you don't need as many external sources.
however, i just can't seem to get a very simple test working.
index.spec.js
/* eslint-disable object-property-newline */
import React from 'react';
import ReactTestUtils from 'react-dom/test-utils' // ES6
import {expect} from 'chai';
import Splash from '../../../src/components/Splash';
import * as styles from '../../../src/components/Splash/style.css';
describe('<Splash />', () => {
it('must be defined', () => {
expect(Splash).to.be.defined;
})
it('should have kindred logo', () => {
const SplashRendered = ReactTestUtils.renderIntoDocument(<Splash/>);
const RenderedSplash = ReactTestUtils.findRenderedDOMComponentWithClass(SplashRendered, styles.indexAppContent);
expect(RenderedSplash.className).to.equal(styles.indexAppContent);
})
});
Mocha Helpers
// jsdom
const exposedProperties = ['window', 'navigator', 'document'];
global.document = jsdom('');
global.window = document.defaultView;
Object.keys(document.defaultView).forEach((property) => {
if (typeof global[property] === 'undefined') {
global[property] = document.defaultView[property];
}
});
global.navigator = {
userAgent: 'node.js'
};
Splash/index.js
import React from 'react';
import { NavLink } from 'react-router-dom'
import Logo from '../shared/logo/index';
import * as styles from './style.css';
class Splash extends React.Component {
render(){
return (
<div className={styles.indexAppContent}>
<NavLink to="/home" className={styles.index}>
<Logo />
</NavLink>
</div>
);
}
}
export default Splash;
Terminal
> BABEL_ENV=test nyc mocha --reporter tap 'test/**/*.spec.js'
Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead.
1..2
ok 1 Splash must be defined
not ok 2 Splash should have kindred logo
TypeError: Cannot call a class as a function
at _classCallCheck (/var/www/kindred.com/src/components/Splash/index.js:1:10298)
at Splash (/var/www/kindred.com/src/components/Splash/index.js:1:10514)
I believe I am missing a fundimental part of testing app. I believed we load react up into jsdom which means we don't need a browser, it then loads up. But clearly rather than just mounting this single component it is trying to run everything including my router
I shall read up more into this then.
When you unit test a component that renders a Route/Link/NavLink, you need to wrap it in a router. See this example from the api docs:
// broken
test('it expands when the button is clicked', () => {
render(
<Sidebar/>
)
click(theButton)
expect(theThingToBeOpen)
})
// fixed!
test('it expands when the button is clicked', () => {
render(
<MemoryRouter>
<Sidebar/>
</MemoryRouter>
)
click(theButton)
expect(theThingToBeOpen)
})
As far as checking for a specific class (as mentioned in your comment above), you should use the hasClass method.