React component tests Suggest edits

React component

Here's a basic example of a React component. It’s using Functional style of writing React Components. However, using Class style works as well.

Form.jsx 

import React from 'react';

class Form extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};
  }

  handleSubmit = (e) => {
    e.preventDefault();
    if (!this.state.name.trim()) {
      return;
    }
    this.props.addTask(this.state.name);
    this.setState({name: ''});
  };

  handleChange = (e) => {
    this.setState({name: e.target.value});
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit} method='post'>
        <h2 className='label-wrapper'>
          <label htmlFor='new-todo-input' className='labellg'>
            What needs to be done?
          </label>
        </h2>
        <input
          type='text'
          id='new-todo-input'
          className='input inputlg'
          name='text'
          autoComplete='off'
          value={this.state.name}
          onChange={this.handleChange}
        />
        <button type='submit' className='btn btnprimary btnlg'>
          Add
        </button>
      </form>
    );
  }
}

export default Form;

Install the React plugin

For testing out React component we need to use the @nightwatch/react Nightwatch plugin. It uses the Vite dev server under the hood and vite-plugin-nightwatch.

npm install @nightwatch/react

Update your Nightwatch configuration and add the plugin to the list:

nightwatch.conf.js
module.exports = {
  plugins: ['@nightwatch/react']
}

Update the Nightwatch globals file

To be able to run component tests we need to make sure the Vite dev server is running and the localhost URL matches that which is set in the .env file. By default, it is set to http://locahost:3000

If you're not already using external globals with Nightwatch, go ahead and create a new file (e.g. test/globals.js) and then set the path in your Nightwatch config file:

nightwatch.conf.js
module.exports = {
  plugins: ['@nightwatch/react'],

  globals_path: 'test/globals.js'
  // other nightwatch settings...
}

Read more about test globals.

test/globals.js
const {setup} = require('@nightwatch/react');

let viteServer;
module.exports = {
  async before() {
    viteServer = await setup({
      // you can optionally pass an existing vite.config.js file
      // viteConfigFile: '../vite.config.js'
    });

    // This will make sure the launch Url is set correctly when mounting the React component
    this.launchUrl = http://localhost:${viteServer.config.server.port};
  },

  async after() {
    await viteServer.close();
  }
}

Write the test

Below is a basic test for the Form component. In this test we mount a component and then we use the expect API to make sure the component is visible.

test/src/formTest.js
describe('form test', function() {
  let component;

  before(async () => {
    component = await browser.mountComponent('/test/components/Form.jsx');
  });

  it('should render functional components without error', async function() {
    await browser.expect(component).to.be.visible;
  })
})

Recommended content

Improve this article