enzyme

问题 We have a React component called ScrollContainer than calls a prop function when its content is scrolled to the bottom. Basically: componentDidMount() { const needsToScroll = this.container.clientHeight != this.container.scrollHeight const { handleUserDidScroll } = this.props if (needsToScroll) { this.container.addEventListener('scroll', this.handleScroll) } else { handleUserDidScroll() } } componentWillUnmount() { this.container.removeEventListener('scroll', this.handleScroll) } handleScroll

问题 I have a simple Todo component that utilizes react-redux hooks that I'm testing using enzyme but I'm getting either an error or an empty object with a shallow render as noted below. What is the correct way to test components using hooks from react-redux? Todos.js const Todos = () => { const { todos } = useSelector(state => state); return ( <ul> {todos.map(todo => ( <li key={todo.id}>{todo.title}</li> ))} </ul> ); }; Todos.test.js v1 ... it('renders without crashing', () => { const wrapper =

问题 I have header component like below: import { useLocation } from "react-router-dom"; const Header = () => { let route = useLocation().pathname; return route === "/user" ? <ComponentA /> : <ComponentB />; } How will you mock this useLocation() to get the path as user? I cant simply call the Header component as below in my test file as I am getting an error: TypeError: Cannot read property 'location' of undefined at useLocation describe("<Header/>", () => { it("call the header component", () =>

问题 Currently Im using functional component with react hooks. But i unable to test the useState Hook completely. Consider a scenario like, in useEffect hook i'm doing api call and setting value in the useState. For jest/enzyme i have mock data to test but i unable to set initial state value for useState in jest. const [state, setState] = useState([]); I want to set initial state as array of object in jest. I could not find any setState function as similar like class component. 回答1: You can mock

问题 I'm having some difficulty testing a component with jest and enzyme. What I would like to do is test submitting the form without a value in the name field. This will make certain that the component is displaying an error. However, when I run the rest I am getting an error in my console: TypeError: Cannot read property 'value' of undefined I'm fairly new to front-end testing, and testing in general. So, I'm not entirely sure I'm using enzyme correctly for this type of test. I don't know if my

问题 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/__tests__/title.test.ts ● Testing title component › renders Enzyme Internal Error: Enzyme expects an adapter to be configured, but found none. [...] To find out more about this, see http://airbnb.io/enzyme/docs/installation/index.html I proceed to install 'enzyme-adapter-react-16' as described in the

问题 I am new to the react redux . I am trying to write a unit test case for a component search functionality which looks like, constructor(props) { super(props); this.staate = { search : '' } } onInputChnage = (e) => { this.setState({ search: e.target.value }); } render() { const { jobs: { content } } = this.props; const { search } = this.state; const filteredList = content.filter(job => (job.jdName && job.jdName.toLowerCase().includes(search.toLowerCase())) || (job.technology && job.technology

问题 I am new to the react redux . I am trying to write a unit test case for a component search functionality which looks like, constructor(props) { super(props); this.staate = { search : '' } } onInputChnage = (e) => { this.setState({ search: e.target.value }); } render() { const { jobs: { content } } = this.props; const { search } = this.state; const filteredList = content.filter(job => (job.jdName && job.jdName.toLowerCase().includes(search.toLowerCase())) || (job.technology && job.technology

问题 Most of the components looks like as follows: import React, { Component } from "react"; import { withTranslation } from "react-i18next"; class XYZ extends Component { constructor(props) { super(props); this.state = { }; } ..... ..... render() { const { t } = this.props; return ( ..... ); } } export default withTranslation()(XYZ); or, like below, in case of function components: export const XYZ = withTranslation()(({ t, ...props }) => { .... return ( ..... ); }); I wanted to use enzyme shallow

问题 Most of the components looks like as follows: import React, { Component } from "react"; import { withTranslation } from "react-i18next"; class XYZ extends Component { constructor(props) { super(props); this.state = { }; } ..... ..... render() { const { t } = this.props; return ( ..... ); } } export default withTranslation()(XYZ); or, like below, in case of function components: export const XYZ = withTranslation()(({ t, ...props }) => { .... return ( ..... ); }); I wanted to use enzyme shallow