Testing Automation on React.js

Question

We have UI built on REACT framework. A problem I’ve been having with React is, it does not give unique ID required for Testing Automation to identify Web Elements. I can not build test scripts based on CSS path or XPATH of web elements since it will keep on changing causing more efforts on maintenance of the scripts.

I need to know

Which framework is best to test UI based on REACT framework? Which ID (id, CSS Path, Xpath) is used in these tools? If I am not getting unique ID in application, what is work around? Will 'unique-id-mixin' help to resolve this issue?

Answer 1

If you are looking to run Unit tests, then take a look at Airbnb's Enzyme. You can identify components/elements using references to the component (as well as CSS paths)

https://github.com/airbnb/enzyme

it('renders three <Foo /> components', () => {
  const wrapper = shallow(<MyComponent />);
  expect(wrapper.find(Foo)).to.have.length(3);
});

If you're looking to run functional tests then perhaps you should look at adding identifiers to your components (classes/data attributes etc...)