Here we will see how to test Button using Jest.
import React from 'react';
import { Button } from 'react-bootstrap'
let buttonText = 'Button1'
function App() {
return (
<div className="App">
<Button data-testid="buttonId" >{buttonText}</Button>
</div>
);
}
export default App;
it("renders button correctly",()=>{
render(<App />);
const bt = screen.getByTestId("buttonId")
expect(bt).toHaveTextContent("Button1");
})
npm test
function App() {
const [buttonText, setButtonText] = useState('Button1');
function handleClick(){
setButtonText('Button2');
};
return (
<div className="App">
<Button data-testid="buttonId" onClick={handleClick}>{buttonText}</Button>
</div>
);
}
export default App;
test("button click",()=>{
render(<App />);
const bt = screen.getByTestId("buttonId")
fireEvent.click(bt);
expect(bt).toHaveTextContent("Button2");
})
npm test
function App() {
const [buttonText, setButtonText] = useState('Button1');
return (
<div className="App">
<Button data-testid="buttonId" disabled={true}>{buttonText}</Button>
</div>
);
}
export default App;
test("button type",()=>{
render(<App />);
const bt = screen.getByTestId("buttonId")
expect(bt).toBeDisabled();
})
npm test
function App() {
const [buttonText, setButtonText] = useState('Button1');
return (
<div className="App">
<Button data-testid="buttonId">{buttonText}</Button>
</div>
);
}
export default App;
test("button type",()=>{
render(<App />);
const bt = screen.getByTestId("buttonId")
expect(bt).not.toBeDisabled();
})
npm test