Your test suite must contain at least one test
make sure describe / it/ expect variables are not been imported In my case, the IDE( VSCode ) automatically import the variable describe from another library.
enzyme
jest + enzyme, using mount(), document.getElementById() returns null on component which appear after _method call
Found the solution thanks to https://stackoverflow.com/users/853560/lewis-chung and gods of Google: Attached my component to DOM via attachTo param: const result = mount( <App />, { attachTo: document.body } ); Changed buggy string in my method to string which works with element Object agentToMod.location = locationSelect.options[locationSelect.selectedIndex].text;` : _modifyAgentStatus () { const { currentAgentProfile, agentsDatabase } = … Read more
Enzyme simulate an onChange event
You can simply spy to the method directly via the prototype. it(“responds to name change”, done => { const handleChangeSpy = sinon.spy(New.prototype, “handleChange”); const event = {target: {name: “pollName”, value: “spam”}}; const wrap = mount( <New /> ); wrap.ref(‘pollName’).simulate(‘change’, event); expect(handleChangeSpy.calledOnce).to.equal(true); }) Alternatively, you can use spy on the instance’s method, but you have to … Read more
How to set initial state for useState Hook in jest and enzyme?
You can mock React.useState to return a different initial state in your tests: // Cache original functionality const realUseState = React.useState // Stub the initial state const stubInitialState = [‘stub data’] // Mock useState before rendering your component jest .spyOn(React, ‘useState’) .mockImplementationOnce(() => realUseState(stubInitialState)) Reference: https://dev.to/theactualgivens/testing-react-hook-state-changes-2oga
What is the difference between Jest and enzyme?
Jest is a framework which includes a task runner, assertion library, and mocking support. This means it can execute different unit test cases, write its result in console or log files, create mocks, or verify all the assertions. In short, it will execute the test. Enzyme, on other hand, is a library that provides a … Read more
How to mock useHistory hook in jest?
I needed the same when shallowing a react functional component that uses useHistory. Solved with the following mock in my test file: jest.mock(‘react-router-dom’, () => ({ useHistory: () => ({ push: jest.fn(), }), }));
Difference between enzyme, ReactTestUtils and react-testing-library
ReactTestUtils gives you the bare minimum to test a React component. I haven’t seen it being used for big applications. Enzyme and react-testing-library are both good libraries that give you all the tools you need to test your application. They have two different philosophies though. Enzyme allows you to access the internal workings of your … Read more
How to test a component using react-redux hooks with Enzyme?
To mock useSelector use can do this import * as redux from ‘react-redux’ const spy = jest.spyOn(redux, ‘useSelector’) spy.mockReturnValue({ username:’test’ })
How do you mock useLocation() pathname using shallow test enzyme Reactjs?
I found that I can mock the React Router hooks like useLocation using the following pattern: import React from “react” import ExampleComponent from “./ExampleComponent” import { shallow } from “enzyme” jest.mock(“react-router-dom”, () => ({ …jest.requireActual(“react-router-dom”), useLocation: () => ({ pathname: “localhost:3000/example/path” }) })); describe(“<ExampleComponent />”, () => { it(“should render ExampleComponent”, () => { shallow(<ExampleComponent/>); … Read more
How do I get an attribute of an element nested in a React component using Jest and/or Enzyme?
After some digging, I found the following. The indicated line in the question: const src = img.node.props.src; can be simplified to the following: const src = img.prop(‘src’); The documentation can be found here. If someone knows of a non-Enzyme way of doing this, I’d still be interested in hearing about it.