React with Testim

🚧

TDK Feature

This is not supported in Testim's visual editor.

TDK works with React, we even use React internally as well (with MobX) and it is fully supported.

In fact, because React projects are so flakey to test to begin with with, TDK particularly shines in React projects.

This is because Testim silently waits for the page and elements to be ready when performing asynchronous actions (like setState or calling a setter obtained from useState).

Getting Started (with or without create-react-app)

Whether you are using Create React App, have ejected or haven't used it to begin with - you can initialize Testim like you would for any other project. You would follow the instructions shown in getting started and create a new project.

Sharing Code

Sometimes it is beneficial to share code between your frontend project and test project. This is fully supported and TDK can run and read your webpack configuration files.

This has the advantage of letting you share code between the test project and main project which has positive consequences (less code) but also negative ones (you are no longer writing blackbox tests).

Let's say for example that you are using CSS Modules and in your React code you have a Button component:

import { button } from './button.scss'

function Button (props) {
  return <button className={button}>{props.text}</button>
}

Now when writing tests, the class name will likely break because that's how CSS modules works. This is also a common problem with other tools like styled components.

You have two options:

• Use smart locators which normalize this automatically.
• Integrate webpack into your TDK build - this is done by passing the --webpack-config option to TDK
• see the webpack.config.js in your generated TDK project. You can pass style-loader there or merge it with your existing webpack configuration.