score:3
There are different solutions, for different problems to solve.
Testing an isolated component
Isolate the Label
component in its own file and export it.
const Label = ({ intl, data }) => {
if (data && data.length === 0) {
return <div>{intl.translate('no_data')}</div>
}
return null
};
export default Label;
Then, test it individually. Like Quentin mentioned, a component is just a function you can call. We could call it directly, but it would leak irrelevant implementation details to the test. Instead, we assume it's a component and test it as such.
import Label from './Label';
describe('Label component', () => {
it('returns null when there is data', () => {
// works but leaks implementation details
expect(Label({ data: ['anything'] })).toEqual(null);
// Implementation agnostic test
const wrapper = shallow(<Label />);
expect(wrapper.isEmptyRender()).toBe(true);
});
});
Testing a composition of components
Since you're testing StatisticsGraph
and that your Label
component has no identifiable selector, you could use snapshots to make sure it's rendered correctly.
import React from 'react';
import { render } from 'enzyme';
import toJson from 'enzyme-to-json';
describe('StatisticsGraph component', () => {
it('renders properly', () => {
const wrapper = render(<StatisticsGraph {...mockPropsForComponent} />);
expect(toJson(wrapper)).toMatchSnapshot();
});
});
The snapshot artifact should be committed alongside code changes, and reviewed as part of your code review process. [...] On subsequent test runs Jest will simply compare the rendered output with the previous snapshot. If they match, the test will pass. If they don't match, either the test runner found a bug in your code that should be fixed, or the implementation has changed and the snapshot needs to be updated.
Testing a component manually
If we really want to test each component's part manually, we may want to change the Label
to be easier to find.
const Label = ({ intl, data }) => (
<div className="label">
{Boolean(data && data.length === 0) && intl.translate('no_data')}
</div>
);
Then, the component should be found and we can use .isEmpty()
to check that it worked.
describe('StatisticsGraph component', () => {
it('does not render a label when there is data', () => {
const component = shallow(<StatisticsGraph {...mockPropsForComponent} />);
const label = component.find(Label);
expect(label.isEmpty()).toBe(true);
});
});
Source: stackoverflow.com
Related Query
- How to check the value of a nested React component in a unit test with Enzyme and Jest
- How to unit test the output of a React component method in a React Router / Redux app with Enzyme
- How to test a component with a nested container with React and Redux?
- How to test styles and media queries rendered by a React component with Jest and/or Enzyme
- How to unit test React functions passed in as prop to child component with Enzyme shallow wrapper
- How To Unit Test React Component With react-intl, react-router-dom v4 and TypeScript
- How to get all the child elements inside a component in unit test using react and enzyme?
- How to test if state of a component is changed by the function using jest and Enzyme in React TDD
- how to test component while passing boolean value with react testing library and jest
- How to simulate onChange on material-ui autoComplete component and check the state value using jest and enzyme
- How to test a className with the Jest and React testing library
- How to mock React component methods with jest and enzyme
- How to test style for a React component attribute with Enzyme
- Test setting text value with React and Enzyme
- Test the content of an <iframe> in a React component with Enzyme
- How to test the state of a functional component in React with Jest (No Enzyme)
- How to read console.log from a mounted component with Enzyme and Jest in Create React App
- Test with Mocha and Enzyme a React component that uses React CSS Modules
- How can mock the value of a state and data in my react test
- How to test React Router params with Redux and enzyme
- How to test if a React component contains another component with Tape and Enzyme?
- Unit test method that calls clearInterval with Jest and Enzyme on React
- How to test with jest and typescript with types a basic react function component
- How to test a React component that has Router, Redux and two HOCs... with Jest and Enzyme?
- How to test React useEffect hooks with jasmine and enzyme
- How to test functions in React with Jest and Enzyme
- react create app, typescript unit test with mocha and chai what is the correct setup to support es6 modules?
- Test an whole table React component cells with jest and Enzyme
- stub fetch unit test react with enzyme and jest
- How to Unit test the rendering of a child component in the parent component using react testing library?
More Query from same tag
- React Native Mask Image with another image
- Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'setState')
- React pro sidebar
- how to remove base gatsby style from safari (purple bg)
- Can't get offsetHeight from React Ref
- Can I use hooks inside a function (not a functional component)
- useEffect is not called appropriate time, so useState in useEffect is not working
- nextjs does not support an empty link - what is a workaround for this?
- How to clearTimeout an async function when componentWillUnmount in a Reactjs component?
- React state depends on other state
- How can i clear the chat input-box after sending the message(from suggestion) in botframework webchat?
- How to create a generic interface or type that accepts tow different interfaces that go under single array?
- How to make other button functions automatically run when a button is clicked
- How to display json data via table in component of react.js
- react css class not applying
- How do I display an image with CSS in ReactJS?
- How can I compare data from two maps
- How to make a Dropdown with specific values in ReactJS?
- View is not updating after adding element to MongoDB
- Is there a way to send filter object like prop in ReferenceField so that I can catch it in dataprovider in params?
- MobX. @observable works but @computed don't
- Prop in stateless component fat arrow function cannot be validated with eslint
- Javascript - Anonymous functions declared without type declarations, should they be local scoped?
- Fetching data from firebase realtime database returns invalid json response
- loadmore does not triggers using react-infinite-scroller
- How to destructure redux state in react redux?
- get '' and root to aren't identical in Rails 5?
- Custom sort for custom render cell Data Grid Material UI
- Embedded react component not rendered/loaded in html page. (webpack/babel)
- react dynamic form values with antd