enzyme

问题 I'm trying test my React component with Jest + Enzyme , but when my component has SASS file ( scss ), is occurring SyntaxError . This is my SASS file content: .user-box { width: 50px; height: 50px; } And I just import that in my component: import React from 'react'; import './userBox.scss'; class MyComponent extends React.Component { render() { const style = { borderRadius: '99px' }; return ( <div>Hello World</div> ); } } export default MyComponent; Following error message of my test: If I

问题 I am trying to test one of the methods in my react component. It is being called after a button click so I have the simulation in place with enzyme it('clone should call handleCloneClick when clicked', () => { const cloneButton = wrapper.find('#clone-btn'); cloneButton.simulate('click'); }); My component method is here: _handleCloneClick(event) { event.preventDefault(); event.stopPropagation(); this.props.handleClone(this.props.user.id); } The _handleCloneClick is being called when the user

问题 I'm using jest and enzyme with my create-react-app project. When I run npm test , I get an output that shows the names of the test files that passed but I'd like the output to also include the names of the tests. Example: Button.test.js it ('renders button', () => { const button = shallow(<Button type="save"/>); expect(toJson(button)).toMatchSnapshot(); }); Right now when I run npm test the output is just: PASS src/Button.test.js" and the number of passed and failed tests (when the tests are

问题 I am trying to unit test my reactjs component: import React from 'react'; import Modal from 'react-modal'; import store from '../../../store' import lodash from 'lodash' export class AddToOrder extends React.Component { constructor(props) { super(props); this.state = {checked: false} //debugger } checkBoxChecked() { return true } render() { console.log('testing=this.props.id',this.props.id ) return ( <div className="order"> <label> <input id={this.props.parent} checked={this.checkBoxChecked()

问题 I'm fairly new to testing with Enzyme/Jest on a React application, so perhaps there's something wrong with the way I'm setting up my test. I specifically want to test a single function in my component: reviewCandidate() reviewCandidate() { const { candidate_id: candidateId, } = this.props.match.params; const { latest_application_id: latestApplication, } = this.state.candidateInfo; const { expressApi, } = this.props; /** @todo Define user when authentication is in place */ const user =

问题 In a React component I have export default class MyComp extends Component { ... componentDidMount() { this.customFunc(); } customFunc = () => { // .. } ... } And when I try to test this method with Jest and Enzyme like this: it('Should call customFunc on mount', () => { const MyCompInstance = mount(<MyComp {...props} >).instance(); const spy = jest.spyOn(MyCompInstance, 'customFunc'); expect(spy).toHaveBeenCalled(); }); it fails with Expected mock function to have been called, but it was not

问题 Writing an unit test file and not able to Render Modal components. I am using jest and Enzyme REACTJS Here is what I have used in previous files for testing describe("Component Test", () => { beforeEach(() => (wrapper = mount(<BrowserRouter><Component{...baseProps} /></BrowserRouter>))); it("renders a modal portal", () => { const isOpen = wrapper.state("isOpen"); const modalPortal = wrapper.find(".fullmodal"); expect(isOpen).toBeTruthy; expect(modalPortal).toHaveLength(1); expect(toJson

问题 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 test the rest of the functionality. I can't seem to find any way to get to this ref and mock it. Things I have tried Accessing it via the childs property. React does not like that, since ref is not really a props Mocking useRef. I tried multiple ways and could only get it to work with a spy when my

问题 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 test the rest of the functionality. I can't seem to find any way to get to this ref and mock it. Things I have tried Accessing it via the childs property. React does not like that, since ref is not really a props Mocking useRef. I tried multiple ways and could only get it to work with a spy when my

问题 I have react app was made by create-react-app using jest and enzyme for testing So how can i get the value of window.location.pathname inside my test file? This is my spec import React from 'react'; import MovieDetailsBox from '../../src/components/movie_single/MovieDetailsBox'; import { expect } from 'chai'; import { shallow } from 'enzyme'; import { movie_details } from '../../src/data/movies_details' import { empty_user } from '../../src/helper/sessionHelper'; jest.mock('react-router');