score:1
you can also use the chai plugin to spy on custom functions in you jsx file.
// to use this pluggin add this to the top of your testing file
const chai = require("chai"), spies = require("chai-spies");
chai.use(spies);
import foo from "./<path to component>/foo.jsx";
describe("foo", () => {
it("a call to customfunction will not error", () => {
let spy = chai.spy(foo.prototype, "customfunciton"); // spy
const wrapper = mount(<foo/>);
wrapper.setprops({bar: "baz"}); // manipulate you component in some way
expect(spy).to.have.been.called.once();
});
});
@leland-richardson is right, it depends on what your test is doing. understanding that will help you compose new ways to manipulate your component and thus make assertions.
another example testing a function that updates your components state.
it("function will assert new state", () => {
const wrapper = shallow(<foo {...props}/>);
wrapper.instance.customfunction(); // call custom function
wrapper.update();
expect(wrapper.state("bar")).to.equal("new-state");
});
chai-spies also has a handful of chainable getters that make testing custom functions much easier. please see the docs for a more in-depth explanation.
score:27
the best answer to this question really depends on what it is that customfunction
is actually doing...
you can call the function like this:
wrapper.instance().customfunction('foo', 'bar');
if it's a function that sets state on the instance itself, and thus affects what the rendered output looks like, you may want to call .update()
as well
wrapper.instance().customfunction('foo', 'bar'); // uses setstate internally
wrapper.update(); // updates render tree
// do assertions on the rendered output
Source: stackoverflow.com
Related Query
- Mocha, Enzyme: Unit testing custom functions in react component using enzyme
- Testing a react component using custom hooks with crud operations functions
- Testing changes to React component state and spying on instance methods using enzyme
- Testing functions inside stateless React component with Enzyme
- Unit testing react component that makes ajax calls using JEST
- _this.store.getState is not a function when testing react component with enzyme and mocha
- D3js in a React Component Unit Testing using Jest/Enzyme
- Test custom method on React component has been called, using Enzyme and Sinon
- Unit testing React component using Material UI Dialog
- unit testing a react component with mocha
- How to unit test React functions passed in as prop to child component with Enzyme shallow wrapper
- How to Unit test the rendering of a child component in the parent component using react testing library?
- Error when testing a React Parent that contains a Child React Redux Component using Enzyme Mount
- Testing react component using rxjs library with enzyme
- Trying to unit test a React component using Jest and Enzyme
- How to call custom methods of React component while doing unit testing. I am using typescript
- Unit testing of exported function using react / enzyme
- Testing React Component with Enzyme and Mocha
- How to refer to conditional elements when unit testing React components using jest and enzyme
- Testing data within table component in React using Enzyme
- Unit Testing Custom React Hooks in TypeScript using Jest and @testing-library/react-hooks
- Testing simple React component using Jest and enzyme - what did I wrong?
- Can we skip a react hook (getderivedstatefromprops) while unit test of a component using Enzyme and jest
- Testing React Functional Component with Hooks using Jest
- Testing react component enclosed in withRouter (preferably using jest/enzyme)
- Unit testing React click outside component
- Accessing the State of a Functional Component with React Hooks when Testing with Enzyme
- How to mock ResizeObserver to work in unit tests using react testing library
- How to mock out sub-components when unit testing a React component with Jest
- Testing a component that uses useEffect using Enzyme shallow and not mount
More Query from same tag
- How to fire a function on dropdown change in React Class component
- using styled components i got stuck while displaying a image. i don't know where things went wrong
- ProviderFunction not exporting my new functions
- ReactJS remove root component on certain page
- JSS <ThemeProvider>, how to use media queries
- React MODULE_NOT_FOUND error even if it should be correct
- Unable to delete a record with an alert message
- If true set attribute else set className in JSX
- Rendering website in different viewports [ Mobile, Tablet, Desktop ] on Desktop Browser window
- Why do I need curly braces for nested JSX, even if it is working without it
- How can be identified each child component of the same type rendered by the same parent component
- How can I add and remove list of select box in reactjs
- How can I write a Jest test in React to check if a component has a CSS class?
- Does the className attribute take on the role of the id attribute in Reactjs?
- React firebase authentication returns null
- Trying to move an item from one array to another in React state
- React integration in PTV xServer
- BrowserRouter shows Error when Page is refreshed | React-router-v4
- The Cloud Firestore emulator is not running, so calls to Firestore will affect production
- How to create a delay in React.js
- Loading screen using React + Redux
- ReactDOM.createPortal() renders empty element when called in a function
- How do I write Mulitiple if statments inside array.map() call
- fill an array with useEffect and map()
- React - Display text messages in sections
- Why is my type null in React and TypeScript?
- React semantic-ui-date-picker default date not working
- Algolia-specific => How to access hit attributes within react jsx
- name already exists regex
- React - Fetch Data from API and map nested JSON