score:1
found the solution in here: enzyme simulate an onchange event
test('input should call handlechange on change event', () => {
const event = {target: {name: 'username', value: 'usertest'}};
const login = mount(<login />);
const handlechange = jest.spyon(login.instance(), 'handlechange');
login.update(); // <--- needs this to force re-render
const userinput = login.find('.username');
userinput.simulate('change', event);
expect(handlechange).tobecalled();
})
it needed this login.update();
in order to work!
thank everyone for your help!
score:0
handlechange
isn't currently being mocked. a couple of approaches:
pass change event handler as prop to
login
component.
<div classname="input-group">
<input
onchange={this.props.handlechange}
value={this.state.username}
classname="form-control login__input username"
type="text"
placeholder="user name"
name={'username'}
autofocus
/>
</div>
login.spec.js
...
const handlechange = jest.fn();
const login = mount(<login handlechange={handlechange}/>);
...
replace handlechange with the mock function.
...
const handlechange = jest.fn();
const login = mount(<login />);
login['handlechange'] = handlechange // replace instance
...
expect(handlechange).tobecalled();
use jest
spyon
to create a mock function that wraps the original function.
...
const handlechange = jest.spyon(object, 'handlechange') // will call the original method
expect(handlechange).tobecalled();
replace
handlechange
on the login component with a mock function. ... const handlechange = jest.spyon(object, 'handlechange').mock // will call the original method expect(handlechange).tobecalled();
score:1
yes, you'll need to pass an event object to you simulate
function.
const event = {target: {name: "special", value: "party"}};
element.simulate('change', event);
edit: oh, and you'll also need to do something like:
jest.spyon(login.instance(), 'handlechange')
but that's unrelated to your error
Source: stackoverflow.com
Related Query
- Test a React Component function with Jest
- Test return value of function with Jest in React
- How to test with jest and typescript with types a basic react function component
- Stateful React component with async function failing Jest test
- Why does the jest mock function not getting executed in my test with react testing library?
- How to Test a function with Jest and React
- Test function with Jest in React Js
- How to test asynchronous function with rtl and jest in React
- How to test a className with the Jest and React testing library
- How to test form submission in React with Jest and Enzyme? Cannot read property 'preventDefault' of undefined
- React Enzyme Jest test component with className
- React unit test with jest in es6
- Test a form with Jest and React JS TestUtils
- How to test snapshots with Jest and new React lazy 16.6 API
- Error: Unable to find an element with the text when I try a test with Jest in React
- React jest test with enzyme error
- How can I test React component's style with Jest + Enzyme?
- How to test the state of a functional component in React with Jest (No Enzyme)
- React Jest test fails to run with ts-jest - Unexpected token on imported file
- How do I test an array of JSX elements in jest with react renderer
- Testing debounced function in React component with Jest and Enzyme
- Jest with Create React App: Test suite failed to run - Unexpected token
- Test React element height with Jest
- React Jest test fails to run with ts-jest - Encountered an unexpected token on imported file
- Test text input with react and jest
- how can I test if useState hook has been called with jest and react testing library?
- Why is my jest test failing in React native with typescript?
- How to test class instance inside a function with Jest
- How to test events created with mousetrap in react using jest
- How to replace global function while doing unit test with jest
More Query from same tag
- How can I limit and insert conditions on results returned from API fetch request after using map
- I am using react-select and I want to fetch data on `onFocus` event
- how to define this $ react JS
- Tracking User Active Time
- Property 'text': Undefined in Next.js
- React Link and React Route: Trying to clear the page but appending is occurring instead? Very weird
- Two ternary operator’s in one line causing a "Failed to compile" error?
- Dynamic font-size calculate based on container size
- Issue with setup and run Electron + React + Typescript + Webpack application
- ReactJS Flux Utils components
- How can I set 2 values for one variable, and the component will render with one value, depending of some prop input
- "Undefined" problem when receiving data from api
- How to change zIndex in react-select drowpdown
- jQuery UI Datepicker in React throws Uncaught TypeError
- Unable to get values form child to parent -Reactjs Redux
- Making videojs player fit the div dimensions
- React Native - Emulator - Hermes library crash - couldn't find DSO to load: libhermes.so
- How to send newline commands over Websocket message?
- Unable to provide text to input field in reactjs form
- Do I always need to return a value from a redux middleware?
- Plaid only giving "ITEM_LOGIN_REQUIRED" for Capital One
- useEffect not re-rendering when expected
- Fetch with headers
- onSubmit is not defined error in React Js
- Why usePrevious returns undefined on first render - react hooks?
- Access material UI dropdown value in react and JSX
- React Hooks onchange event too slow for scanner input
- create-react-app command fails, how to undo a npm set registry command
- react js simple script does not work
- Inject new inline styles to a React HOC product