enzyme

问题 I have a component that returns null in render under certain conditions: render() { if (this.props.isHidden) { return null; } return <div>test</div>; } I want to check if the component is null when isHidden is true with jest and enzyme: describe('myComp', () => { it('should not render if isHidden is true', () => { const comp = shallow(<myComp isHidden={true} />); expect(comp.children().length).toBe(0); }); }); This works but is there a more idiomatic way to write this test ? Testing for

问题 I have a <UserListComponent /> which outputs one <Contact /> component and list of contacts presentated by <Contacts /> . The problem is that in the test for <UserListComponent /> when I try to mount it, test outputs an error Invariant Violation: You should not use <Route> or withRouter() outside a <Router> withRouter() is used in <Contacts /> component. How can I mock ContactsComponent without router in test of parent component? I found some similar issue https://www.bountysource.com/issues

问题 I'm writing test for a component with ref. I'd like to mock the ref element and change some properties but have no idea how to. Any suggestions? // MyComp.jsx class MyComp extends React.Component { constructor(props) { super(props); this.getRef = this.getRef.bind(this); } componentDidMount() { this.setState({elmHeight: this.elm.offsetHeight}); } getRef(elm) { this.elm = elm; } render() { return <div> <span ref={getRef}> Stuff inside </span> </div> } } // MyComp.test.jsx const comp = mount(

问题 Given a simple component: export default class SearchForm extends Component { constructor(props) { super(props) this.state = { query: '' } } onSubmit = (event) => { event.preventDefault() history.push(`/results/${this.state.query}`, { query: this.state.query }) } render() { return ( <form onSubmit={this.onSubmit}> <input type="text" value={this.state.query} onChange={event => this.setState({ query: event.target.value })} /> <button>Search</button> </form> ) } } And the test: describe(

问题 I am new to unit testing with Jest. I am testing a component in a React app. There are two components: Home and LogOutButton This is The Home component: import 'bootstrap/dist/css/bootstrap.css'; import 'bootstrap/dist/css/bootstrap-theme.css'; import React from 'react'; import ReactDOM from 'react-dom'; import { LogOutButton } from './LogOutButton.js'; class Home extends React.Component { displayName = Home.name; state = { result: 0, val1: 0, val2: 0, }; handleChangeOne = event => { this

问题 My React-application has a component that fetches data to display from a remote server. In the pre-hooks era, componentDidMount() was the place to go. But now I wanted to use hooks for this. const App = () => { const [ state, setState ] = useState(0); useEffect(() => { fetchData().then(setState); }); return ( <div>... data display ...</div> ); }; And my test using Jest and Enzyme looks like this: import React from 'react'; import { mount } from 'enzyme'; import App from './App'; import { act

问题 Is there a way to get the actual DOM node so I can the query it with the Dom api as opposed to being required to use enzyme's api, it's just for edge cases where for example I need to assert things about the dom node itself. 回答1: You can use wrapper.getDOMNode() Enzyme docs 回答2: Perhaps you are looking for enzyme's instance()? const wrapper = mount(<input type="text" defaultValue="hello"/>) console.log(wrapper.instance().value); // 'hello' PS: instance() should give you a ReactComponent ,

问题 Is there a way to get the actual DOM node so I can the query it with the Dom api as opposed to being required to use enzyme's api, it's just for edge cases where for example I need to assert things about the dom node itself. 回答1: You can use wrapper.getDOMNode() Enzyme docs 回答2: Perhaps you are looking for enzyme's instance()? const wrapper = mount(<input type="text" defaultValue="hello"/>) console.log(wrapper.instance().value); // 'hello' PS: instance() should give you a ReactComponent ,

问题 I'm a novice at react and any javascript testing frameworks. I have a simple component that retrieves an item from the API and shows them to the screen. The function getItems() is called from componentWillMount. Is it possible to wait until getItems() has finished before making my assertions? ItemDetails.js class ItemDetails extends Component { constructor(props) { super(props); this.state = { details: '' } } componentWillMount() { this.getItem(); } getItem() { const itemId = this.props.match

问题 Why render object JSON in snapshot? For an component const MyComp = <Provider {...stores}> <Router history={history}> <ClassRoom.wrappedComponent {...props} /> </Router> </Provider>, I test as const wrapper = mount(MyComp ); expect(toJson(wrapper)).toMatchSnapshot(); And my snapshot is generated with object json information. <Provider classRoomStore={ClassRoomStore {}} mqttStore={ <MemoryRouter> <Router history={ Object { "action": "POP", "block": [Function], "canGo": [Function], "createHref"