Unable to find button to find its disable status for test

user_9401029 0
Viewed 46

I am just trying to write a simple test to be able to check if a button is at disabled status. But it looks I am not selecting the button correctly.

Can I please know what I am doing wrong? Thank you. 

return (
    <Fragment>
    {(isAutomatic) && (
        <div className="margin-b">
        <!-- Many other nested divs here -->
        </div>
    )}

    <div className="flex">
        <!-- Many other nested divs here -->
    </div>

    {is_something_true && (<div id="inputAlert" className="alert-form">Alert message</div>)}

    <div className="margin-2-l">
        <!-- Many other nested divs here -->
    </div>

    <button type="submit" className="btn margin-a margin-b margin-c margin-d" disabled={canUpLoad()} onClick={() => getContent()}>Load</button>

    <div className="flex padding-t">
        <!-- Many other nested divs here -->
    </div>

    <!-- Trying to capture this button and check if it is disabled -->
    <button type="submit" id="email" className="btn margin-a margin-b margin-c margin-d" disabled={false} onClick={() => getData()}>Send</button>
    </Fragment>
);

My test 

import React from 'react';
import { shallow, mount } from 'enzyme';
import MyComponent from '../../../../src/space/components/MyComponent';


const data = {
    name: ''
}

describe('MyComponent tests', () => {
  it('should render correctly', () => {
    const wrapper = shallow(<MyComponent someData={data} />);

    // also tried find('#email') and find('Button#email') not working.
    const submitButton = wrapper.find('button#email'); 
    console.log(submitButton.text()); // trying to get the value 'Send' for this button but nothing gets printed. Same for submitButton.text
    // this test fails.
    expect(submitButton.prop('disabled')).toBe(false);
  });
});
enzyme reactjs javascript
1 Answers

I believe this issue is due to not configuring an Enzyme adapter. See the Enzyme documentation for reference. It says:

To get started with enzyme, you can simply install it via npm. You will need to install enzyme along with an Adapter corresponding to the version of react (or other UI Component library) you are using. For instance, if you are using enzyme with React 16, you can run:

npm i --save-dev enzyme enzyme-adapter-react-16

Once you have the enzyme-adapter-react-16 installed, you then need to configure Enzyme to use it in your test:

import { configure, shallow } from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'

configure({ adapter: new Adapter() })

Solution

Note: I explain using hooks below, and that may be extra work outside the scope of your question. However, hooks are a great tool to learn about. It's likely that adding the call to Enzyme.configure with an adapter will solve your issue.

I created a working solution based on assumptions I made about your components, and below is that code. I'm doing this on React 16.13, which means I have access to the Hooks API

Specifically, I'm using the useRef hook. I create a ref in the body of the function, and assign it the value of a ref for the button. The useRef hook creates a ref where ref.current is assigned the value returned by calling the function passed as the argument for the useRef call.

To disable the button in question, I set disabled={buttonRef.current}, which is returned by the canUpload function call.

Form.js

export default ({
  getData: handleClick,
  getContent = () => <div>Content</div>,
  canUpLoad: checkCanUpload = () => true,
}) => {
  const buttonRef = React.useRef(checkCanUpload())

  return (
    <React.Fragment>
      <div className="margin-2-l">Many other nested divs here</div>

      <button
        type="submit"
        className="btn margin-a margin-b margin-c margin-d"
        disabled={buttonRef.current}
        onClick={handleClick}
      >
        Load
      </button>

      <div className="flex padding-t">Many other nested divs here</div>

      <button
        type="submit"
        id="email"
        className="btn margin-a margin-b margin-c margin-d"
        ref={buttonRef}
        disabled={buttonRef.current}
        onClick={handleClick}
      >
        Send
      </button>
    </React.Fragment>
  )
}

Form.spec.js

In the test, I make sure to call Enzyme.configure({ adapter: new Adapter() }) where Adapter is the default export of enzyme-adapter-react-16.

import React from 'react'
import { shallow, configure } from 'enzyme'
import MyComponent from './Form'
import Adapter from 'enzyme-adapter-react-16'

configure({ adapter: new Adapter() })

const data = {
  name: '',
}

describe('MyComponent tests', () => {
  it('should render correctly', () => {
    const wrapper = shallow(<MyComponent someData={data} />)

    // also tried find('#email') and find('Button#email') not working.
    const submitButton = wrapper.find('button#email')
    console.log(submitButton.text())
    expect(submitButton.prop('disabled')).toBe(true)
  })
})

This is the output of running the unit test:

 PASS  src/Form.spec.js
  MyComponent tests
    √ should render correctly (11ms)

  console.log src/Form.spec.js:18
    Send

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        3.796s
Ran all test suites related to changed files.

You can see that Send outputted by the console, and that the test passed.

Demo

See this working demo: https://codesandbox.io/s/react-playground-mkcgj

The caveat of using CodeSandbox is that both the test and the browser render will not work at the same time due to React being included twice. Comment out the configure in the test to check the browser output, and when looking at the test, ignore the "Adapter is not defined" and just look at the test result for that one test.

However, I suggest downloading that Sandbox as a zip (File > Export to ZIP), and unzipping the contents into a local folder. cd into the directory and install dependencies with yarn or npm install.

Then, run yarn start or npm run start to start the development server.

To run the test, run yarn test or npm run test.

user_15260370
Related