Gain insights into Dockerizing Eslint, Jest, Prettier, and React Testing Library (RTL) on Educative. Learn efficient setup and integration for streamlined development and testing workflows.

prettyeslint.tar.gz

prettier

ESLint_static

jest

bash

Dockerizing Eslint, Jest, Prettier and the React Testing Library (RTL) on Educative

Dockerizing Eslint, Jest, Prettier and RTL on Educative

Wrapping up what we have achieved so far, here's all three environments fully set up and ready to run on our platform! Enjoy! :)

## Prettier 

function HelloWorld({greeting = "hello", greeted = '"World"', silent = false, onMouseOver,}) {

    if(!greeting){return null}
  
       // TODO: Don't use random in render
    let num = Math.floor (Math.random() * 1E+7).toString().replace(/\.\d+/ig, "")
  
    return <div className='HelloWorld' title={`You are visitor number ${ num }`} onMouseOver={onMouseOver}>
  
      <strong>{ greeting.slice( 0, 1 ).toUpperCase() + greeting.slice(1).toLowerCase() }</strong>
      {greeting.endsWith(",") ? " " : <span style={{color: '\grey'}}>", "</span> }
      <em>
      { greeted }
      </em>
      { (silent)
        ? "."
        : "!"}
  
      </div>}

test

const { add, mul, sub, div } = require('./input');

test('2 + 3 = 5', () => {
  expect(add(2, 3)).toBe(5);
});

test('3 * 4 = 12', () => {
  expect(mul(3, 4)).toBe(12);
});

test('5 - 6 = -1', () => {
  expect(sub(5, 6)).toBe(-1);
});

test('8 / 4 = 2', () => {
  expect(div(8, 4)).toBe(2);
});




const add = (a, b) => a + b;
const mul = (a, b) => a * b;
const sub = (a, b) => a - b;
const div = (a, b) => a / b;

module.exports = { add, mul, sub, div };

import React from 'react';
import { shallow, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

import HelloWorld from './app';

var TestResult = function() {
    this.succeeded = false;
    this.reason = "";
    this.input = "";
    this.expected_output = "";
    this.actual_output = "";
}

export const executeTests = function() {

  var results = [];

  result = new TestResult();
  result.input = 'HelloWorld Component';
  result.expected_output = "span containing text 'Hello World'"

  let wrapper = shallow(<HelloWorld />);

  // Call your Challenge function here.

  let type = wrapper.type();
  let testSuccessful = true;
  let failureReason;

  if (type !== 'span') {
    testSuccessful = false;
    failureReason = "You need to render exactly one span HTML element";
  } else if (wrapper.props().children != "Hello World") {
     testSuccessful = false;
     failureReason = "You have rendered wrong message in your span element";
  }

  result.actual_output = wrapper.html();

  if (testSuccessful) {
    result.succeeded = true;
    result.reason = "Succeeded"
  } else {
    result.succeeded = false;
    result.reason = failureReason;
  }

  results.push(result);

  return results;
}


React

Dart

Typescript React

---
In the next lesson, we'll learn how to setup the React testing library (RTL) on Educative!

Wrapping up what we have achieved so far, here's all three environments fully set up and ready to run on our platform! Enjoy! :)

# Prettier 

__default

Eslint, Jest and Prettier in Action on Educative

Prettier

Eslint

Jest