Я сделал фиктивный модульный тест для CodeSandbox, это фиктивный компонент
import React from "react";
class App extends React.Component {
constructor(props) {
super(props);
this.state = { someStr: "", desc: true, sortedChars: [] };
}
handleSubmit = event => {
if (event) event.preventDefault();
const { someStr, desc } = this.state;
this.setState({ sortedChars: this.sort(someStr, desc) });
};
sort = (str, desc) => {
let charArray = str.split("").sort();
return charArray.sort((a, b) => (desc ? b[1] - a[1] : a[1] - b[1]));
};
render() {
return <div className="app">Test</div>;
}
}
export default App;
Затем тест выглядит следующим образом
import React from "react";
import Adapter from "enzyme-adapter-react-16";
import { shallow, configure } from "enzyme";
import App from "./App";
configure({ adapter: new Adapter() });
describe("handle submit", () => {
it("returns a sorted array", () => {
const wrapper = shallow(<App />);
const instance = wrapper.instance();
expect(wrapper.state("sortedChars")).toBe([]);
expect(wrapper.state("someStr")).toBe("");
instance.handleSubmit();
expect(wrapper.state("sortedChars")).toBe([]);
});
});
Я не делаю ничего, в частности, другие чем тестирование функции handleSubmit со значениями по умолчанию
, и я получаю
expect(received).toBe(expected)
Expected value to be (using ===):
Array []
Received:
Array []
Difference:
Compared values have no visual difference.
9 | it("returns a sorted array", () => {
10 | const wrapper = shallow(<App />);
11 | const instance = wrapper.instance();
> 12 | expect(wrapper.state("sortedChars")).toBe([]);
13 | expect(wrapper.state("someStr")).toBe("");
14 | instance.handleSubmit();
15 | expect(wrapper.state("sortedChars")).toBe([]);
Он говорит Compared values have no visual difference
, но все равно тест помечается как неудачный.
Почему это? https://codesandbox.io/s/modest-cache-4bvze