Các kiểu lớp Reac-igen-render-html

Tìm hiểu sâu hơn về thử nghiệm ví dụ ứng dụng React Native đang hoạt động bằng cách đọc loạt bài sau. Phần 1. Jest – Ảnh chụp nhanh đi vào hoạt động và Phần 2. Jest – Ảnh chụp nhanh Redux cho các Hành động và Bộ giảm tốc của bạn

Cài đặt

Bắt đầu từ phiên bản gốc phản ứng 0. 38, thiết lập Jest được bao gồm theo mặc định khi chạy

import React, {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native';

class Intro extends Component {
render[] {
return [

Welcome to React Native!

This is a React Native snapshot test.


];
}
}

const styles = StyleSheet.create[{
container: {
alignItems: 'center',
backgroundColor: '#F5FCFF',
flex: 1,
justifyContent: 'center',
},
instructions: {
color: '#333333',
marginBottom: 5,
textAlign: 'center',
},
welcome: {
fontSize: 20,
margin: 10,
textAlign: 'center',
},
}];

export default Intro;
0. Cấu hình sau sẽ được tự động thêm vào gói của bạn. tập tin json

{
"scripts": {
"test": "jest"
},
"jest": {
"preset": "react-native"
}
}

Chạy

import React, {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native';

class Intro extends Component {
render[] {
return [

Welcome to React Native!

This is a React Native snapshot test.


];
}
}

const styles = StyleSheet.create[{
container: {
alignItems: 'center',
backgroundColor: '#F5FCFF',
flex: 1,
justifyContent: 'center',
},
instructions: {
color: '#333333',
marginBottom: 5,
textAlign: 'center',
},
welcome: {
fontSize: 20,
margin: 10,
textAlign: 'center',
},
}];

export default Intro;
1 để chạy thử nghiệm với Jest

tiền boa

Nếu bạn đang nâng cấp ứng dụng gốc phản ứng của mình và trước đó đã sử dụng giá trị đặt trước

import React, {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native';

class Intro extends Component {
render[] {
return [

Welcome to React Native!

This is a React Native snapshot test.


];
}
}

const styles = StyleSheet.create[{
container: {
alignItems: 'center',
backgroundColor: '#F5FCFF',
flex: 1,
justifyContent: 'center',
},
instructions: {
color: '#333333',
marginBottom: 5,
textAlign: 'center',
},
welcome: {
fontSize: 20,
margin: 10,
textAlign: 'center',
},
}];

export default Intro;
2, hãy xóa phần phụ thuộc khỏi tệp
import React, {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native';

class Intro extends Component {
render[] {
return [

Welcome to React Native!

This is a React Native snapshot test.


];
}
}

const styles = StyleSheet.create[{
container: {
alignItems: 'center',
backgroundColor: '#F5FCFF',
flex: 1,
justifyContent: 'center',
},
instructions: {
color: '#333333',
marginBottom: 5,
textAlign: 'center',
},
welcome: {
fontSize: 20,
margin: 10,
textAlign: 'center',
},
}];

export default Intro;
3 của bạn và thay đổi giá trị đặt trước thành
import React, {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native';

class Intro extends Component {
render[] {
return [

Welcome to React Native!

This is a React Native snapshot test.


];
}
}

const styles = StyleSheet.create[{
container: {
alignItems: 'center',
backgroundColor: '#F5FCFF',
flex: 1,
justifyContent: 'center',
},
instructions: {
color: '#333333',
marginBottom: 5,
textAlign: 'center',
},
welcome: {
fontSize: 20,
margin: 10,
textAlign: 'center',
},
}];

export default Intro;
4

Kiểm tra ảnh chụp nhanh

Hãy tạo thử nghiệm chụp nhanh cho một thành phần giới thiệu nhỏ với một vài dạng xem và thành phần văn bản và một số kiểu

giới thiệu. js

import React, {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native';

class Intro extends Component {
render[] {
return [

Welcome to React Native!

This is a React Native snapshot test.


];
}
}

const styles = StyleSheet.create[{
container: {
alignItems: 'center',
backgroundColor: '#F5FCFF',
flex: 1,
justifyContent: 'center',
},
instructions: {
color: '#333333',
marginBottom: 5,
textAlign: 'center',
},
welcome: {
fontSize: 20,
margin: 10,
textAlign: 'center',
},
}];

export default Intro;

Bây giờ, hãy sử dụng trình kết xuất thử nghiệm của React và tính năng chụp nhanh của Jest để tương tác với thành phần và nắm bắt đầu ra được hiển thị và tạo một tệp ảnh chụp nhanh

__tests__/Kiểm tra giới thiệu. js

import React from 'react';
import renderer from 'react-test-renderer';
import Intro from '../Intro';

test['renders correctly', [] => {
const tree = renderer.create[].toJSON[];
expect[tree].toMatchSnapshot[];
}];

Khi bạn chạy

import React, {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native';

class Intro extends Component {
render[] {
return [

Welcome to React Native!

This is a React Native snapshot test.


];
}
}

const styles = StyleSheet.create[{
container: {
alignItems: 'center',
backgroundColor: '#F5FCFF',
flex: 1,
justifyContent: 'center',
},
instructions: {
color: '#333333',
marginBottom: 5,
textAlign: 'center',
},
welcome: {
fontSize: 20,
margin: 10,
textAlign: 'center',
},
}];

export default Intro;
1 hoặc
import React, {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native';

class Intro extends Component {
render[] {
return [

Welcome to React Native!

This is a React Native snapshot test.


];
}
}

const styles = StyleSheet.create[{
container: {
alignItems: 'center',
backgroundColor: '#F5FCFF',
flex: 1,
justifyContent: 'center',
},
instructions: {
color: '#333333',
marginBottom: 5,
textAlign: 'center',
},
welcome: {
fontSize: 20,
margin: 10,
textAlign: 'center',
},
}];

export default Intro;
6, điều này sẽ tạo ra một tệp đầu ra như thế này

__tests__/__snapshots__/Kiểm tra giới thiệu. js. búng tay

{
"scripts": {
"test": "jest"
},
"jest": {
"preset": "react-native"
}
}
0

Lần tới khi bạn chạy thử nghiệm, kết quả được hiển thị sẽ được so sánh với ảnh chụp nhanh đã tạo trước đó. Ảnh chụp nhanh phải được cam kết cùng với các thay đổi mã. Khi kiểm tra ảnh chụp nhanh không thành công, bạn cần kiểm tra xem đó là thay đổi dự kiến ​​hay ngoài ý muốn. Nếu thay đổi được mong đợi, bạn có thể gọi Jest bằng

import React, {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native';

class Intro extends Component {
render[] {
return [

Welcome to React Native!

This is a React Native snapshot test.


];
}
}

const styles = StyleSheet.create[{
container: {
alignItems: 'center',
backgroundColor: '#F5FCFF',
flex: 1,
justifyContent: 'center',
},
instructions: {
color: '#333333',
marginBottom: 5,
textAlign: 'center',
},
welcome: {
fontSize: 20,
margin: 10,
textAlign: 'center',
},
}];

export default Intro;
7 để ghi đè lên ảnh chụp nhanh hiện có

Mã cho ví dụ này có sẵn tại ví dụ/reac-native

cấu hình đặt trước

Giá trị đặt trước thiết lập môi trường và rất kiên định và dựa trên những gì chúng tôi thấy là hữu ích tại Facebook. Tất cả các tùy chọn cấu hình có thể được ghi đè giống như chúng có thể được tùy chỉnh khi không sử dụng cài đặt trước

Môi trường

import React, {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native';

class Intro extends Component {
render[] {
return [

Welcome to React Native!

This is a React Native snapshot test.


];
}
}

const styles = StyleSheet.create[{
container: {
alignItems: 'center',
backgroundColor: '#F5FCFF',
flex: 1,
justifyContent: 'center',
},
instructions: {
color: '#333333',
marginBottom: 5,
textAlign: 'center',
},
welcome: {
fontSize: 20,
margin: 10,
textAlign: 'center',
},
}];

export default Intro;
4 vận chuyển với giá trị đặt trước Jest, vì vậy trường
import React, {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native';

class Intro extends Component {
render[] {
return [

Welcome to React Native!

This is a React Native snapshot test.


];
}
}

const styles = StyleSheet.create[{
container: {
alignItems: 'center',
backgroundColor: '#F5FCFF',
flex: 1,
justifyContent: 'center',
},
instructions: {
color: '#333333',
marginBottom: 5,
textAlign: 'center',
},
welcome: {
fontSize: 20,
margin: 10,
textAlign: 'center',
},
}];

export default Intro;
9 của
import React, {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native';

class Intro extends Component {
render[] {
return [

Welcome to React Native!

This is a React Native snapshot test.


];
}
}

const styles = StyleSheet.create[{
container: {
alignItems: 'center',
backgroundColor: '#F5FCFF',
flex: 1,
justifyContent: 'center',
},
instructions: {
color: '#333333',
marginBottom: 5,
textAlign: 'center',
},
welcome: {
fontSize: 20,
margin: 10,
textAlign: 'center',
},
}];

export default Intro;
3 của bạn phải trỏ đến
import React, {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native';

class Intro extends Component {
render[] {
return [

Welcome to React Native!

This is a React Native snapshot test.


];
}
}

const styles = StyleSheet.create[{
container: {
alignItems: 'center',
backgroundColor: '#F5FCFF',
flex: 1,
justifyContent: 'center',
},
instructions: {
color: '#333333',
marginBottom: 5,
textAlign: 'center',
},
welcome: {
fontSize: 20,
margin: 10,
textAlign: 'center',
},
}];

export default Intro;
4. Giá trị đặt trước là môi trường nút bắt chước môi trường của ứng dụng React Native. Bởi vì nó không tải bất kỳ DOM hoặc API trình duyệt nào, nó cải thiện đáng kể thời gian khởi động của Jest

biến đổiIgnorePattern tùy chỉnh

Tùy chọn này có thể được sử dụng để chỉ định tệp nào sẽ được chuyển đổi bởi Babel. Rất tiếc, nhiều mô-đun npm

import React, {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native';

class Intro extends Component {
render[] {
return [

Welcome to React Native!

This is a React Native snapshot test.


];
}
}

const styles = StyleSheet.create[{
container: {
alignItems: 'center',
backgroundColor: '#F5FCFF',
flex: 1,
justifyContent: 'center',
},
instructions: {
color: '#333333',
marginBottom: 5,
textAlign: 'center',
},
welcome: {
fontSize: 20,
margin: 10,
textAlign: 'center',
},
}];

export default Intro;
4 không biên dịch trước mã nguồn của chúng trước khi xuất bản

Theo mặc định, giá trị đặt trước

import React, {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native';

class Intro extends Component {
render[] {
return [

Welcome to React Native!

This is a React Native snapshot test.


];
}
}

const styles = StyleSheet.create[{
container: {
alignItems: 'center',
backgroundColor: '#F5FCFF',
flex: 1,
justifyContent: 'center',
},
instructions: {
color: '#333333',
marginBottom: 5,
textAlign: 'center',
},
welcome: {
fontSize: 20,
margin: 10,
textAlign: 'center',
},
}];

export default Intro;
2 chỉ xử lý các tệp nguồn riêng của dự án và
import React, {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native';

class Intro extends Component {
render[] {
return [

Welcome to React Native!

This is a React Native snapshot test.


];
}
}

const styles = StyleSheet.create[{
container: {
alignItems: 'center',
backgroundColor: '#F5FCFF',
flex: 1,
justifyContent: 'center',
},
instructions: {
color: '#333333',
marginBottom: 5,
textAlign: 'center',
},
welcome: {
fontSize: 20,
margin: 10,
textAlign: 'center',
},
}];

export default Intro;
4. Nếu bạn có các phụ thuộc npm cần được chuyển đổi, bạn có thể tùy chỉnh tùy chọn cấu hình này bằng cách bao gồm các mô-đun khác ngoài
import React, {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native';

class Intro extends Component {
render[] {
return [

Welcome to React Native!

This is a React Native snapshot test.


];
}
}

const styles = StyleSheet.create[{
container: {
alignItems: 'center',
backgroundColor: '#F5FCFF',
flex: 1,
justifyContent: 'center',
},
instructions: {
color: '#333333',
marginBottom: 5,
textAlign: 'center',
},
welcome: {
fontSize: 20,
margin: 10,
textAlign: 'center',
},
}];

export default Intro;
4 bằng cách nhóm chúng và tách chúng bằng toán tử
import React from 'react';
import renderer from 'react-test-renderer';
import Intro from '../Intro';

test['renders correctly', [] => {
const tree = renderer.create[].toJSON[];
expect[tree].toMatchSnapshot[];
}];
7

import React, {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native';

class Intro extends Component {
render[] {
return [

Welcome to React Native!

This is a React Native snapshot test.


];
}
}

const styles = StyleSheet.create[{
container: {
alignItems: 'center',
backgroundColor: '#F5FCFF',
flex: 1,
justifyContent: 'center',
},
instructions: {
color: '#333333',
marginBottom: 5,
textAlign: 'center',
},
welcome: {
fontSize: 20,
margin: 10,
textAlign: 'center',
},
}];

export default Intro;
1

Bạn có thể kiểm tra đường dẫn nào sẽ khớp [và do đó bị loại khỏi quá trình chuyển đổi] bằng một công cụ như thế này

import React from 'react';
import renderer from 'react-test-renderer';
import Intro from '../Intro';

test['renders correctly', [] => {
const tree = renderer.create[].toJSON[];
expect[tree].toMatchSnapshot[];
}];
2 sẽ loại trừ tệp khỏi quá trình chuyển đổi nếu đường dẫn khớp với bất kỳ mẫu nào được cung cấp. Do đó, việc chia thành nhiều mẫu có thể dẫn đến kết quả ngoài ý muốn nếu bạn không cẩn thận. Trong ví dụ bên dưới, loại trừ [còn được gọi là xác nhận nhìn trước phủ định] cho
import React from 'react';
import renderer from 'react-test-renderer';
import Intro from '../Intro';

test['renders correctly', [] => {
const tree = renderer.create[].toJSON[];
expect[tree].toMatchSnapshot[];
}];
9 và
{
"scripts": {
"test": "jest"
},
"jest": {
"preset": "react-native"
}
}
00 triệt tiêu lẫn nhau

import React, {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native';

class Intro extends Component {
render[] {
return [

Welcome to React Native!

This is a React Native snapshot test.


];
}
}

const styles = StyleSheet.create[{
container: {
alignItems: 'center',
backgroundColor: '#F5FCFF',
flex: 1,
justifyContent: 'center',
},
instructions: {
color: '#333333',
marginBottom: 5,
textAlign: 'center',
},
welcome: {
fontSize: 20,
margin: 10,
textAlign: 'center',
},
}];

export default Intro;
5

tập tin thiết lập

Nếu bạn muốn cung cấp cấu hình bổ sung cho mọi tệp thử nghiệm, thì có thể sử dụng cấu hình này để chỉ định tập lệnh thiết lập

moduleNameMapper

Có thể được sử dụng để ánh xạ đường dẫn mô-đun tới một mô-đun khác. Theo mặc định, cài đặt trước ánh xạ tất cả hình ảnh tới mô-đun sơ khai hình ảnh nhưng nếu không tìm thấy mô-đun thì tùy chọn cấu hình này có thể trợ giúp

import React, {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native';

class Intro extends Component {
render[] {
return [

Welcome to React Native!

This is a React Native snapshot test.


];
}
}

const styles = StyleSheet.create[{
container: {
alignItems: 'center',
backgroundColor: '#F5FCFF',
flex: 1,
justifyContent: 'center',
},
instructions: {
color: '#333333',
marginBottom: 5,
textAlign: 'center',
},
welcome: {
fontSize: 20,
margin: 10,
textAlign: 'center',
},
}];

export default Intro;
6

Lời khuyên

Giả lập các mô-đun gốc bằng cách sử dụng jest. chế nhạo

Giá trị đặt trước Jest được tích hợp trong

import React, {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native';

class Intro extends Component {
render[] {
return [

Welcome to React Native!

This is a React Native snapshot test.


];
}
}

const styles = StyleSheet.create[{
container: {
alignItems: 'center',
backgroundColor: '#F5FCFF',
flex: 1,
justifyContent: 'center',
},
instructions: {
color: '#333333',
marginBottom: 5,
textAlign: 'center',
},
welcome: {
fontSize: 20,
margin: 10,
textAlign: 'center',
},
}];

export default Intro;
4 đi kèm với một vài mô phỏng mặc định được áp dụng trên kho lưu trữ gốc phản ứng. Tuy nhiên, một số thành phần gốc phản ứng hoặc thành phần bên thứ ba dựa vào mã gốc để được hiển thị. Trong những trường hợp như vậy, hệ thống mô phỏng thủ công của Jest có thể giúp mô phỏng quá trình triển khai cơ bản

Ví dụ: nếu mã của bạn phụ thuộc vào thành phần video gốc của bên thứ ba có tên là

{
"scripts": {
"test": "jest"
},
"jest": {
"preset": "react-native"
}
}
04, bạn có thể muốn loại bỏ mã đó bằng mô hình thủ công như thế này

import React, {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native';

class Intro extends Component {
render[] {
return [

Welcome to React Native!

This is a React Native snapshot test.


];
}
}

const styles = StyleSheet.create[{
container: {
alignItems: 'center',
backgroundColor: '#F5FCFF',
flex: 1,
justifyContent: 'center',
},
instructions: {
color: '#333333',
marginBottom: 5,
textAlign: 'center',
},
welcome: {
fontSize: 20,
margin: 10,
textAlign: 'center',
},
}];

export default Intro;
9

Điều này sẽ hiển thị thành phần dưới dạng

{
"scripts": {
"test": "jest"
},
"jest": {
"preset": "react-native"
}
}
05 với tất cả các đạo cụ của nó trong kết xuất ảnh chụp nhanh. Xem thêm

Đôi khi bạn cần cung cấp một mô hình thủ công phức tạp hơn. Ví dụ: nếu bạn muốn chuyển tiếp các loại chống đỡ hoặc trường tĩnh của một thành phần gốc sang một mô hình giả, bạn có thể trả về một thành phần React khác từ một mô hình thông qua trình trợ giúp này từ jest-react-native

import React, {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native';

class Intro extends Component {
render[] {
return [

Welcome to React Native!

This is a React Native snapshot test.


];
}
}

const styles = StyleSheet.create[{
container: {
alignItems: 'center',
backgroundColor: '#F5FCFF',
flex: 1,
justifyContent: 'center',
},
instructions: {
color: '#333333',
marginBottom: 5,
textAlign: 'center',
},
welcome: {
fontSize: 20,
margin: 10,
textAlign: 'center',
},
}];

export default Intro;
1

Hoặc nếu bạn muốn tạo bản mô phỏng thủ công của riêng mình, bạn có thể làm điều gì đó như thế này

import React, {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native';

class Intro extends Component {
render[] {
return [

Welcome to React Native!

This is a React Native snapshot test.


];
}
}

const styles = StyleSheet.create[{
container: {
alignItems: 'center',
backgroundColor: '#F5FCFF',
flex: 1,
justifyContent: 'center',
},
instructions: {
color: '#333333',
marginBottom: 5,
textAlign: 'center',
},
welcome: {
fontSize: 20,
margin: 10,
textAlign: 'center',
},
}];

export default Intro;
2

Trong các trường hợp khác, bạn có thể muốn thử mô-đun gốc không phải là thành phần React. Kỹ thuật tương tự có thể được áp dụng. Chúng tôi khuyên bạn nên kiểm tra mã nguồn của mô-đun gốc và ghi nhật ký mô-đun khi chạy ứng dụng gốc phản ứng trên thiết bị thực và sau đó lập mô hình giả thủ công sau mô-đun thực

Nếu bạn kết thúc việc mô phỏng lặp đi lặp lại cùng một mô-đun, bạn nên xác định các mô hình này trong một tệp riêng và thêm nó vào danh sách

{
"scripts": {
"test": "jest"
},
"jest": {
"preset": "react-native"
}
}
01

Chủ Đề