I am writing test and below is my test case. When I run test I get below error. What is wrong with that and how can I fix this? Answer From the doc: The jest object is automatically in scope within every test file. The methods in the jest object help create mocks and let you control Jest’s overall behav…
Tag: enzyme
Jest tests keep failing for React component that renders various HTML elements based on type by using switch statement
I have a React Component that takes an array and iterates over each node, styling and rendering HTML elements based on the types found within the array. I have everything running properly and now I’m trying to write a test using Jest to check that: The component doesn’t render anything when it rec…
SyntaxError: Unexpected token ‘<' on shallow render with Enzyme and Jest in React
I am running tests with jest and enzyme in my React application, and while my simple sanity check test (2+2 expect 4) works, this error is thrown when I go to shallow render a component. It also throws when I try to replace shallow() with render() Here is the app.test.js file: babel.config.js: EDIT : I added …
Unit test with react hook fails
I don’t understand the result I get on this unit test. I expect the second check for textField.valid to be true and instead it returns false. Below is part of the component I’m testing against: … Below is the test I’m running: The output of console.log(wrapper.debug()) is the following…
How to mock/spy useState hook in jest?
I am trying to spy on useState React hook but i always get the test failed This is my React component: counter.test.js: Unfortunately this doesn’t work and i get the test failed with that message: Answer You need to use React.useState instead of the single import useState. I think is about how the code …
How to mock the useState hook implementation so that it actually changes the state during testing
I’m trying to test a component which renders two different sub-components when its internal state changes from false to true: when it’s false it renders a button that, if pressed, changes the state from false to true and renders the other one. The other is a form that on submit does the opposite. …
TypeError: ShallowWrapper::renderProp() can only be called on custom components
I am trying to test the render props of my React component, and have followed some advice in doing so, however it is not working. Component: And my test: But I get this error message: ● › Renders a form I have not found anything online about the error message title: TypeError: ShallowWrapper::renderProp() can…
Testing debounced function in React component with Jest and Enzyme
I am testing a React component using Jest and Enzyme, and am having difficulty testing that a debounced function is called properly (or at all). I’ve simplified the component code below (edited to make code even simpler), link to codepen here I figured that the debounced function test should be pretty s…
eslint should be listed in the project’s dependencies, not devDependencies
Either I don’t understand dependencies vs. devDependencies in node 100% yet or eslint is just wrong here (not capable of analyzing this correctly): These are test dependencies, so why is it saying that they should be listed in dependencies? Additional note: We’re using Travis as our CI so I don…
Components using Date objects produce different snapshots in different timezones
I’m using Enzyme with enzyme-to-json to do Jest snapshot testing of my React components. I’m testing shallow snapshots of a DateRange component that renders a display field with the current range (e.g. 5/20/2016 – 7/18/2016) and two DateInput components that allow selecting a Date value. Thi…