enzyme | 易学教程

Set state when testing functional component with useState() hook

阅读更多关于 Set state when testing functional component with useState() hook

问题 When I tested class component with enzyme I could do wrapper.setState({}) to set state. How can I do the same now, when I am testing function component with useState() hook? For example in my component I have: const [mode, setMode] = useState("my value"); And I want to change mode inside my test 回答1: When using state from hooks, your test must ignore implementation details like state in order to properly test it. You can still make sure the component passes the correct state into its children

Jest/Enzyme ShallowWrapper is empty when creating Snapshot

阅读更多关于 Jest/Enzyme ShallowWrapper is empty when creating Snapshot

问题 So I'm writing a test for my Item component and I tried to render the ItemCard component and then use that wrapper to create a snapshot but it returns an empty ShallowWrapper {} Please see the code for more info: Item.test.js import { shallow } from 'enzyme'; import { ItemCard } from '../Item'; const fakeItem = { id: 'aksnfj23', title: 'Fake Coat', price: '40000', description: 'This is suuuper fake...', image: 'fakecoat.jpg', largeImage: 'largefakecoat.jpg', }; describe('<ItemCard/>', () => {

how to change jest mock function return value in each test?

阅读更多关于 how to change jest mock function return value in each test?

I have a mock module like this in my component test file jest.mock('../../../magic/index', () => ({ navigationEnabled: () => true, guidanceEnabled: () => true })); these functions will be called in render function of my component to hide and show some specific feature. I want to take a snapshot on different combinations of the return value of those mock functions. for suppose I have a test case like this it('RowListItem should not render navigation and guidance options', () => { const wrapper = shallow( <RowListItem type="regularList" {...props} /> ); expect(enzymeToJson(wrapper))

How to spy componentWillMount using jest and enzyme

阅读更多关于 How to spy componentWillMount using jest and enzyme

问题 I am trying to test whether componentWillMount was called and for that my test is test('calls `componentWillMount` before rendering', () => { let fn = jest.fn(SomeComponent.prototype.componentWillMount) mount(<SomeComponent />) expect(fn).toHaveBeenCalled() }) But even though the componentWillMount method is called, the test does not pass. What am I missing here? 回答1: I don't know if the other answers have helped with your question, but you shouldn't need to test componentWillMount. React

JEST component testing

阅读更多关于 JEST component testing

I am new to write unit testing with Jest. I am testing a component over 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.setState({ val1: event.target.value }); }; handleChangeTwo = event => { this.setState({ val2:

How to pass context down to the Enzyme mount method to test component which includes Material UI component?

阅读更多关于 How to pass context down to the Enzyme mount method to test component which includes Material UI component?

问题 I am trying to use mount from Enzyme to test my component in which a several Material UI component are nested. I get this error when running the test: TypeError: Cannot read property 'prepareStyles' of undefined After some digging, I did found that a theme needs to be passed down in a context. I am doing that in the test but still get this error. My test: import expect from 'expect'; import React, {PropTypes} from 'react'; import {mount} from 'enzyme'; import SearchBar from './SearchBar';

how to check the actual DOM node using react enzyme

阅读更多关于 how to check the actual DOM node using react enzyme

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. It seems like this functionality was added recently, you can do wrapper.getDOMNode() Enzyme docs 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 , from which you can use ReactDOM.findDOMNode(ReactComponent) to

Jest mock async calls inside react component

阅读更多关于 Jest mock async calls inside react component

I'm new to jest/enzyme and am trying to mock a call to an aync function that returns a Promise, the call is made inside a react component in the componentDidMount method. The test is attempting to test that componentDidMount sets the array returned by the Promise in the state. The issue I'm having is that the test finishes and passes before the array is added to the state. I am trying to use the 'done' callback to have the test wait until the promise resolves but this doesn't seem to work. I have tried to move the expect calls to the line before the done() call but that doesn't seem to work

Unit testing React click outside component

阅读更多关于 Unit testing React click outside component

问题 Using the code from this answer to solve clicking outside of a component: componentDidMount() { document.addEventListener('mousedown', this.handleClickOutside); } componentWillUnmount() { document.removeEventListener('mousedown', this.handleClickOutside); } setWrapperRef(node) { this.wrapperRef = node; } handleClickOutside(event) { if (this.wrapperRef && !this.wrapperRef.contains(event.target)) { this.props.actions.something() // Eg. closes modal } } I can't figure out how to unit test the

Figuring out how to mock the window size changing for a react component test

阅读更多关于 Figuring out how to mock the window size changing for a react component test

问题 So basically when the component mounts, I have an event listener listen for resize events. It toggles the isMobileView state and then passes it into the children as a prop. So it's imperative that this works and is tested. I'm fairly new to testing and I'm trying to figure out a way I can write a test that resizes the window and makes all the logic happen and test that it executed how it should. Here is the code - componentDidMount() { this.setMobileViewState() window.addEventListener('resize