enzyme

Jest check if an elements attribute exists

由 笑着哭i 提交于 2019-12-11 07:32:01
问题 I want to check with jest if the following svg path element contains the attribute d <path id="TrendLine" fill="none" stroke="black" d="M170,28.76363636363638C170,28.76363636363638,221.46221083573664,189.150059910"></path> How do I use jest to search for specific attribute in an element? 回答1: You can use enzyme's shallow method to render your component and then to check the props on the path element: // at the top of your test file file: import { shallow } from 'enzyme'; ... it('should render

TypeError: dispatch is not a function when I try to test a method using JEST

由 无人久伴 提交于 2019-12-11 05:32:45
问题 I have a method that receives some values as a parameter and then dispatches an action. The problem is that when I shallow my component to test this method, I have an error saying that dispatch is not a function. TEST: test('it changes the state when submit is clicked', () => { const wrapper = shallow(<WizardForm store={store}/>); const values = { entrySign: 'archivoSign', signCertificateFile: 'file', signCertificate: 'text', entryAuth: 'notArchivoAuth', authCertificateFile: 'file',

enzyme wrapper.find(..).simulate keypress doesnt trigger event listener

由 血红的双手。 提交于 2019-12-11 05:27:52
问题 I am trying to press enter on one of the input boxes. Doing it manually triggers the event listener, however, while trying with enzyme, the event listener is not triggered. What am I doing wrong here? Event Listener this.input.addEventListener('keypress', function(event){ debugger; onEnter(event); }); Enzyme function setup(store, props) { return mount(<Provider store={store}> <component{...props}/> </Provider> ); } beforeEach(() => { wrapper = setup(store, {}); searchBar = wrapper.find(

Testing a Redux-connected component using Enzyme

由 て烟熏妆下的殇ゞ 提交于 2019-12-11 04:27:19
问题 have problem with testing redux connected component with enzyme import React from 'react' import { shallow, mount, render } from 'enzyme' import { configure } from 'enzyme'; import Adapter from 'enzyme-adapter-react-15'; import Login from '../../src/routes/login/components/Login' configure({ adapter: new Adapter() }) describe('<Login />', () => { test('component has form-group nodes', () => { const component = shallow(<Login />).dive() expect(component.find('.form-group')).to.have.length(2) }

Testing API Call in React - State not updating

由 ￣綄美尐妖づ 提交于 2019-12-11 02:50:33
问题 I want to test if my state is updated after an API call in my component. I have a method lets say method1() and in that method, it calls fetch and sets the state to the results. Here is the method: method1 = () => { if (this.state.state1 !== "") { fetch('api') .then((resp) => resp.json()) .then((data) => { this.setState({ state2: data }); }) .catch((error) => { console.log(error); }); } } In my test file I already mocked the API with fetch-mock and here is the test trying to test this: it(

Testing if a const modal component is called

由 大兔子大兔子 提交于 2019-12-11 02:47:50
问题 I have a footer component which has several buttons on it. All of these buttons use the Message const, which is an antd modal : Message.jsx import { Modal } from 'antd'; const { confirm } = Modal; export const Message = (text, okayHandler, cancelHandler) => { confirm({ title: text, okText: 'Yes', cancelText: 'No', onOk: okayHandler, onCancel: cancelHandler, }); }; export default Message; Footer.jsx class Footer extends Component { state = { from: null, redirectToReferrer: false, };

Write a jest test to my first component

由 谁都会走 提交于 2019-12-11 00:24:12
问题 I just finished writing my first Reactjs component and I am ready to write some tests (I used material-ui 's Table and Toggle ). I read about jest and enzyme but I feel that I am still missing something. My component looks like this (simplified): export default class MyComponent extends Component { constructor() { super() this.state = { data: [] } // bind methods to this } componentDidMount() { this.initializeData() } initializeData() { // fetch data from server and setStates } foo() { //

React + Enzyme error: Invariant Violation: dangerouslyRenderMarkup(…): Cannot render markup in a worker thread

由 巧了我就是萌 提交于 2019-12-10 22:31:21
问题 I am testing a react component using Enzyme and I'm getting the following error: Invariant Violation: dangerouslyRenderMarkup(...): Cannot render markup in a worker thread. Make sure window and document are available globally before requiring React when unit testing or use ReactDOMServer.renderToString for server rendering I added the following setup for jsdom, before requiring 'enzyme' (as I read in few places): const baseMarkup = '<!DOCTYPE html><html><head><title></title></head><body><

Test React confirmation window using enzyme

由 无人久伴 提交于 2019-12-10 20:56:10
问题 I've got a button in React which opens a simple confirmation window when the user clicks on it. Before I added the confirm method, the test below was green. After adding the confirm it's red. How do I need to change the test to work with the additional confirm? React delete button: const DeleteButton = (props) => { const handleDelete = () => { if(confirm("Are you sure?")) { props.onDelete(props.id) } }; return ( <Button className="btn" onClick={handleDelete}> <i className="fa fa-trash-o"></i>

SyntaxError: Unexpected reserved word on running mocha with enzyme

由 删除回忆录丶 提交于 2019-12-10 20:12:13
问题 On running the enzyme test by using mocha. I am getting the error (function (exports, require, module, __filename, __dirname) { import React fro ^^^^^^ SyntaxError: Unexpected reserved word I have the below-given test script in my test file import React from 'react'; import { assert } from 'chai'; import { render } from 'enzyme'; import Book from '../src/Book'; describe("Book", () => { it("render text", () => { const wrapper = render(<Book author="Dan Abramov" title="Redux and ReactJS" />);
订阅 enzyme