Testing react-loadable components - javascript

I'm having trouble testing my React components that use react-loadable. Say, I have a Button component that, depending on whether it receives an icon prop, loads an Icon component like so:
Button.js
const LoadableIcon = Loadable({
loader: () => import('./Icon'),
loading: () => <div>Loading...</div>
})
function Button(props) {
return (
<button
onClick={props.onClick}>
{props.icon &&
<LoadableIcon name={props.icon} />}
{props.children}
</button>
)
}
When I test this component, however, the Icon had not loaded yet, and instead the test only finds the <div>Loading...</div> element...
Button.test.js
import React from 'react'
import {render} from 'react-testing-library'
import Button from '../Button'
describe('Button', () => {
it('renders icon correctly', () => {
const {getByText} = render(
<Button
icon='add'
/>
)
expect(getByText('add')).toBeInTheDocument()
})
})
Is there an elegant way to handle this situation without using actual setTimeouts?

So, the answer is to read the docs - note to self! The solution based on docs was the following:
describe('Button', () => {
it('renders icon correctly', async () => {
const {getByText} = render(
<Button
icon='add'
/>
)
const icon = await waitForElement(() => getByText('add'))
expect(icon).toBeInTheDocument()
})
})
Also, note that async needs to be used together with await.

I don't have personal experience using react-loadable, but I have implemented a similar component that handles code splitting via the dynamic import() syntax.
To get Jest to work with 'loadable' / 'async' components, I had to configure my .babel-rc config for Jest to include the dynamic-import-node babel plugin that way the modules can be properly resolved even when the import is async.

Related

import npm modules asynchronously in react.js

I am using parcel as a bundler in React.js project.
How to load npm modules asynchronously in react.js?
There is only one page that uses one specific npm module so I didn't need to load it at first loading.
By avoiding this, I would like to reduce the bundle size.
Could you let me the proper way to do this?
========================
And also, if I understood anything wrongly about the bundle size optimization and lazy loading, please let me know.
By using Dynamic Import you may import the package when you really need the package.
You can use a dynamic import inside an useEffect hook like:
const Page = (props) => {
useEffect(
() => {
const [momentjsPromise, cancel] = makeCancelable(import("moment"));
momentjsPromise.then((momentjs) => {
// handle states here
});
return () => {
cancel?.();
};
},
[
/* don't forget the dependencies */
],
);
};
You can use dynamic imports.
Let's say you want to import my-module:
const Component = () => {
useEffect(() => {
import('my-module').then(mod => {
// my-module is ready
console.log(mod);
});
}, []);
return <div>my app</div>
}
Another way is to code-splitt Component itself:
// ./Component.js
import myModule from 'my-module';
export default () => <div>my app</div>
// ./App.js
const OtherComponent = React.lazy(() => import('./Component'));
const App = () => (
<Suspense>
<OtherComponent />
<Suspense>
);
my-module will be splitted along with Component.
These two patterns should work with any bundler, but it will work client side only.

Is there a way to unit test an innaccessible callback function that is called from a child React component using jest

I am unit testing a React 16 functional component that defines a callback and passes it as a property down to the next component to be invoked when a click event fires.
import React from 'react'
function OuterComponent() {
const handleClick = useCallback(() => {
openDialog() // <--- This code is inaccessible from my "OuterComponent.test.js" unit test
}
return <MyDialog clickHandler={handleClick} />
}
export default OuterComponent
I am seeking 100% test coverage and would like to mock all other components/functions using jest that are not part of the "OuterComponent" component.
The problem I am having is that I can't seem to mock the MyDialog component in order to have it trigger the handleClick function.
I also tried to mock the component using this snippet but it still seems to try to load all the imports from MyDialog
jest.doMock('components/MyDialog', () => {
return () => () => <div />
})
//... other mocks along with **openDialog**
//...and in my describe/it...
MyDialog.mockImplementation(() => {})
OuterComponent().handleClick()
expect(openDialog).toHaveBeenCalled()
The hope here was that I could render an empty div for MyDialog and just simply call the handleClick function to test it. Does anyone know what I could be doing wrong or have any other ideas of how to test it?
I don't think you can mock a var in a closure. The best you can do is something along those lines:
import { fireEvent, render } from 'react-testing-library';
jest.mock(
'components/MyDialog',
() => ({ clickHandler }) => (
<button
onClick={clickHandler}
test-id="button"
>
Click me
</button>
),
);
it('should call clickHandler', () => {
const onClick = jest.fn(() => null);
const { queryByTestId } = render(<MyDialog clickHandler={onClick} />);
fireEvent.click(queryByTestId('button'));
expect(onClick.toHaveBeenCalledTimes(1));
});
You actually test the ability for you MyDialog to render something that can execute a callback.

Mock out imported Lazy React component

Here's my lazy component:
const LazyBones = React.lazy(() => import('#graveyard/Bones')
.then(module => ({default: module.BonesComponent}))
export default LazyBones
I'm importing it like this:
import Bones from './LazyBones'
export default () => (
<Suspense fallback={<p>Loading bones</p>}>
<Bones />
</Suspense>
)
And in my test I have this kind of thing:
import * as LazyBones from './LazyBones';
describe('<BoneYard />', function() {
let Bones;
let wrapper;
beforeEach(function() {
Bones = sinon.stub(LazyBones, 'default');
Bones.returns(() => (<div />));
wrapper = shallow(<BoneYard />);
});
afterEach(function() {
Bones.restore();
});
it('renders bones', function() {
console.log(wrapper)
expect(wrapper.exists(Bones)).to.equal(true);
})
})
What I expect is for the test to pass, and the console.log to print out:
<Suspense fallback={{...}}>
<Bones />
</Suspense>
But instead of <Bones /> I get <lazy /> and it fails the test.
How can I mock out the imported Lazy React component, so that my simplistic test passes?
I'm not sure this is the answer you're looking for, but it sounds like part of the problem is shallow. According to this thread, shallow won't work with React.lazy.
However, mount also doesn't work when trying to stub a lazy component - if you debug the DOM output (with console.log(wrapper.debug())) you can see that Bones is in the DOM, but it's the real (non-stubbed-out) version.
The good news: if you're only trying to check that Bones exists, you don't have to mock out the component at all! This test passes:
import { Bones } from "./Bones";
import BoneYard from "./app";
describe("<BoneYard />", function() {
it("renders bones", function() {
const wrapper = mount(<BoneYard />);
console.log(wrapper.debug());
expect(wrapper.exists(Bones)).to.equal(true);
wrapper.unmount();
});
});
If you do need to mock the component for a different reason, jest will let you do that, but it sounds like you're trying to avoid jest. This thread discusses some other options in the context of jest (e.g.
mocking Suspense and lazy) which may also work with sinon.
You don't need to resolve lazy() function by using .then(x => x.default) React already does that for you.
React.lazy takes a function that must call a dynamic import(). This must return a Promise which resolves to a module with a default export containing a React component. React code splitting
Syntax should look something like:
const LazyBones = React.lazy(() => import("./LazyBones"))
Example:
// LazyComponent.js
import React from 'react'
export default () => (
<div>
<h1>I'm Lazy</h1>
<p>This component is Lazy</p>
</div>
)
// App.js
import React, { lazy, Suspense } from 'react'
// This will import && resolve LazyComponent.js that located in same path
const LazyComponent = lazy(() => import('./LazyComponent'))
// The lazy component should be rendered inside a Suspense component
function App() {
return (
<div className="App">
<Suspense fallback={<p>Loading...</p>}>
<LazyComponent />
</Suspense>
</div>
)
}
As for Testing, you can follow the React testing example that shipped by default within create-react-app and change it a little bit.
Create a new file called LazyComponent.test.js and add:
// LazyComponent.test.js
import React, { lazy, Suspense } from 'react'
import { render, screen } from '#testing-library/react'
const LazyComponent = lazy(() => import('./LazyComponent'))
test('renders lazy component', async () => {
// Will render the lazy component
render(
<Suspense fallback={<p>Loading...</p>}>
<LazyComponent />
</Suspense>
)
// Match text inside it
const textToMatch = await screen.findByText(/I'm Lazy/i)
expect(textToMatch).toBeInTheDocument()
})
Live Example: Click on the Tests Tab just next to Browser tab. if it doesn't work, just reload the page.
You can find more react-testing-library complex examples at their Docs website.
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.
To mock you lazy component first think is to transform the test to asynchronous and wait till component exist like:
import CustomComponent, { Bones } from './Components';
it('renders bones', async () => {
const wrapper = mount(<Suspense fallback={<p>Loading...</p>}>
<CustomComponent />
</Suspense>
await Bones;
expect(wrapper.exists(Bones)).toBeTruthy();
}

Code Splitting with react-loadable gives Error : Cannot find module "."

I'm using react-loadable v4.0.4 and webpack v3.5.1.
Here is my code,
import Dashboard from '../../scenes/dashboard/dashboard';
import ReactLoadable from 'react-loadable';
...
const yoPath = 'src/components/scenes/dashboard/dashboard';
const DashboardWrap = ReactLoadable({
loading: Dashboard,
loader: () => {
return new Promise((resolve, reject) =>
require.ensure(
[],
(require) => resolve(require(yoPath)),
(error) => reject(error),
'dashboardChunk'
)
)
}
});
And using react-router-dom v4.1.2, I've set Route as follows,
<Switch>
...
<Route exact path='/dashboard' component={DashboardWrap} />
...
</Switch>
I'm able to build the chunks for the respective component with the name dashboardChunk.
But while loading that component I'm getting the issues as follows.
In the console,
And the chunkfile,
Please let me know if I'm doing anything wrong.
I basically wanted to do code splitting, for that I've just done the following and it works fine.
I've created a common component(wrapper component) as follows,
import React, { Component } from 'react';
class Async extends Component {
componentWillMount = () => {
this.props.load.then((Component) => {
this.Component = Component
this.forceUpdate();
});
}
render = () => (
this.Component ? <this.Component.default /> : null
)
}
export default Async;
Then I've used above component as follows,
export const AniDemo = () => <Async load={import(/* webpackChunkName: "aniDemoChunk" */ "../../scenes/ani-demo/AniDemo.js")} />
export const Dashboard = () => <Async load={import(/* webpackChunkName: "dashboardChunk" */ "../../scenes/dashboard/Dashboard.js")} />
And using the above, I've made the changes in route as follows,
<Route exact path="/ani-demo" component={AniDemo} />
<Route exact path="/dashboard" component={Dashboard} />
With the help of the above changes that I made, I'm able to create chunks properly with the names that I've mentioned in the comments inside import statements ie aniDemoChunk.js and dashboardChunk.js respectively.
And these chunks load only when the respective component is called ie aniDemoChunk.js is loaded on browser only when AniDemo component is called or requested. Similarly for the Dashboard component respectively.
Note: If anyone is getting error re:Unexpected token import. So to support import() syntax just replace import to System.import() or else use babel-plugin-syntax-dynamic-import.
Webpack must be able to determine the imported path during static analysis. If you pass an argument into require, this is not possible.
It is best to put the actual path into require.ensure, i.e.
require.ensure(
['src/components/scenes/dashboard/dashboard']
require =>
resolve(require('src/components/scenes/dashboard/dashboard').default)
error => reject(error),
'dashboardChunk'
)
or use the newer dynamic import syntax. With the newer syntax you could simplify the above into:
Loadable({
loader: () => import(/* webpackChunkName: "dashboardChunk" */ 'src/components/scenes/dashboard/dashboard')
loading: MyLoader
})
Also, the loading argument should be a component to display while your asynchronous load is taking place, e.g. some kind of loading animation.

Render child components with Enzymejs tests

I'm trying to test a simple component that take some props (it have no state, or redux connection) with Enzyme, it works for the plain elements like <div /> and so on, but when i try to test if the element rendered by the child component exists, it fails.
I'm trying to use mount but it spit me a lot of errors, i'm new in this so, here is my code:
import React, { Component } from 'react';
import WordCloud from 'react-d3-cloud';
class PredictWordCloud extends Component {
render() {
const fontSizeMapper = word => Math.log2(word.value) * 3.3;
const { size, data, show } = this.props;
if (!show)
return <h3 className='text-muted text-center'>No data</h3>
return (
<section id='predict-word-cloud'>
<div className='text-center'>
<WordCloud
data={data}
fontSizeMapper={fontSizeMapper}
width={size}
height={300} />
</div>
</section>
)
}
}
export default PredictWordCloud;
It's just a wrapper for <WordCloud />, and it just recieves 3 props directly from his parent: <PredictWordCloud data={wordcloud} size={cloudSize} show={wordcloud ? true : false} />, anything else.
The tests is very very simple for now:
import React from 'react';
import { shallow } from 'enzyme';
import PredictWordCloud from '../../components/PredictWordCloud.component';
import cloudData from '../../helpers/cloudData.json';
describe('<PredictWordCloud />', () => {
let wrapper;
beforeEach(() => {
wrapper = shallow(<PredictWordCloud data={cloudData} size={600} show={true} />)
});
it('Render without problems', () => {
const selector = wrapper.find('#predict-word-cloud');
expect(selector.exists()).toBeTruthy();
});
});
For now it pass but if we change the selector to: const selector = wrapper.find('#predict-word-cloud svg'); where the svg tag is the return of <Wordcloud /> component, the tests fails because the assertion returns false.
I tried to use mount instead of shallow, exactly the same test, but i get a big error fomr react-d3-cloud:
PredictWordCloud Render without problems TypeError: Cannot read property 'getImageData' of null.
This is specially weird because it just happens in the test environment, the UI and all behaviors works perfectly in the browser.
You can find your component directly by Component name.
Then you can use find inside your sub-component as well.
e.g
it('Render without problems', () => {
const selector = wrapper.find('WordCloud').first();
expect(selector.find('svg')).to.have.length(1);
});
or
You can compare generated html structure as well via
it('Render without problems', () => {
const selector = wrapper.find('WordCloud').first();
expect(selector.html()).to.equal('<svg> Just an example </svg>');
});

Categories