enzyme Questions

5

I have React function component that has a ref on one of its children. The ref is created via useRef. I want to test the component with the shallow renderer. I have to somehow mock the ref to tes...
Melchior asked 5/9, 2019 at 12:51

2

Solved

I need to mock an imported CSS file in my jest/enzyme test: Header.test.js import React from 'react' import { shallow } from 'enzyme' import { Header } from './Header' jest.mock('semantic-ui-css...
Galactic asked 17/2, 2018 at 13:22

6

Solved

I've been using Enzyme to test components in my React application for some time. After updating my packages for the first time in a few weeks I've started getting an error from my tests. FAIL src...
Utilitarianism asked 26/9, 2017 at 20:47

2

For bundle size optimization instead of getting components from the lib folder, I am importing it from the es folder. Example: import Modal from 'antd/es/modal'; So on writing test cases it is giv...
Kavanagh asked 19/10, 2020 at 13:27

7

Solved

I have header component like below: import { useLocation } from "react-router-dom"; const Header = () => { let route = useLocation().pathname; return route === "/user" ? <ComponentA /&gt...
Tan asked 28/1, 2020 at 12:44

16

I have updated some of the dependencies today in my project, but it went through really smoothly. Now, when I'm about to push it, I started my tests. And boom. All of them throw: Your test suite m...
Manchineel asked 13/6, 2018 at 18:0

11

I'm using Enzyme's shallow method to test a component which uses the useParams hook to get an ID from the URL params. I'm trying to mock the useParams hook so that it does't call the actual method...
Liederman asked 15/11, 2019 at 19:33

6

I have a component that uses useLocation hook to get the path from the URL. const { pathname } = useLocation(); useEffect(() => { }, [pathname]); While I am trying to mock the location using , ...
Segment asked 14/6, 2021 at 5:1

11

Currently Im using functional component with react hooks. But I'm unable to test the useState hook completely. Consider a scenario like, in useEffect hook I'm doing an API call and setting value in...

6

Solved

How do you set the text of a text input and then test it's value with React / Enzyme? const input = wrapper.find('#my-input'); input.simulate('change', { target: { value: 'abc' } } ); const val...
Horick asked 19/1, 2017 at 1:33

3

Solved

I running jest test file and getting the following error: ● Test suite failed to run Jest encountered an unexpected token Jest failed to parse a file. This happens e.g. when your code or its d...
Younglove asked 10/2, 2022 at 1:3

8

Solved

Either I don't understand dependencies vs. devDependencies in node 100% yet or eslint is just wrong here (not capable of analyzing this correctly): 3:1 error 'chai' should be listed in the projec...
Redfield asked 6/7, 2017 at 3:28

5

// MyComponent.jsx const MyComponent = (props) => { const { fetchSomeData } = props; useEffect(()=> { fetchSomeData(); }, []); return ( // Some other components here ) }; // MyCompo...
Corella asked 3/12, 2019 at 19:23

2

Solved

My test passes just fine, however I get the following error. console.error node_modules/chart.js/src/core/core.controller.js:127 Failed to create chart: can't acquire context from the given item...
Sirois asked 28/12, 2018 at 16:26

24

Solved

I have a component that makes use of Animated component from react native. I started writing a test case to simulate onPress of a component, which calls a function that has Animated.timing in it, a...
Altogether asked 11/6, 2018 at 8:58

2

Solved

I have a HOC to test, during shallow mount I should to call some class methods: it('Should not call dispatch', () => { const dispatch = jest.fn() const WrappedComponent = someHoc(DummyComponen...
Esmond asked 16/10, 2018 at 19:56

4

Solved

I'm trying to write a simple test for a simple React component, and I want to use Jest to confirm that a function has been called when I simulate a click with enzyme. According to the Jest docs, I ...
Orff asked 26/6, 2017 at 22:10

7

Solved

Here is my test file // /imports/components/main.test.js import React from 'react' import { shallow, mount } from 'enzyme' import Main from './main' import TextInput from "/imports/ui/textInput" ....
Helpmeet asked 2/2, 2017 at 2:54

7

Solved

I have a React component which contains some other components that depend on access to a Redux store etc., which cause issues when doing a full Enzyme mount. Let's say a structure like this: impo...
Dorr asked 7/6, 2017 at 3:49

2

How can I test if my styled-component has a specific CSS attribute-value pair? Let's say my component is the following : const myColor = '#111'; const Button = styled.button` background-color:...
Individuation asked 4/1, 2019 at 10:24

3

I am trying to run a test with Jest and I'm currently using jsx and tsx (changing from js to ts) in my react app but when I run my tests, all jsx tests are successful except those in tsx with optio...
Ithnan asked 28/2, 2021 at 0:0

3

Solved

I have a component with a handleAdd function. This function calls a library, which in turn calls axios and returns a promise. Once that's resolved, the handleAdd() method updates component state wh...
Lapstrake asked 9/8, 2020 at 12:18

8

Solved

I am writing an integration test for for a React application, i.e. a test that tests many components together, and I want to mock any calls to external services. The issue is that the test seems to...
Apologist asked 24/6, 2017 at 21:23

6

Solved

react:16.3.0-alpha.1 jest: "22.3.0" enzyme: 3.3.0 typescript: 2.7.1 code: class Foo extends React.PureComponent<undefined,undefined>{ bar:number; async componentDidMount() { this.bar =...
Approval asked 22/3, 2018 at 3:16

3

Solved

prior to posting this question, I tried to search in sqa stackexchange but I found no post about shallow and render there, so I hope someone can help me out here. When should I use shallow and ren...
Weitzman asked 2/8, 2016 at 1:6

© 2022 - 2024 — McMap. All rights reserved.